I have a signup/login page index.html and my homepage indexHome.php. I need to find a way to display a welcome message only once every time a user either logs in or signs up (welcome modal/welcome back modal). I think I can do it by using the form submission buttons on either the signup or login submit buttons and then pass that to the indexHome.php. I think another option would be to use localSession, localStorage, or cookies in my script on indexHome.php to do this, but I'm not really sure how. I have looked through other threads and haven't been able to find a way to do this. I have been working on the issue for a few days and am in need of some assistance. Any help is appreciated! :)
<div id="id05" class="modal" >
<form class="modal-content">
<div class="container">
<h1><?php echo "Welcome, ".$firstname."!"?></h1>
<span onclick="document.getElementById('id05').style.display='none'" class="close2" title="Close Modal">×</span>
<hr>
</div>
</form>
</div>
<div id="id06" class="modal" >
<form class="modal-content">
<div class="container">
<h1><?php echo "Welcome back, ".$firstname."!"?></h1>
<span onclick="document.getElementById('id05').style.display='none'" class="close2" title="Close Modal">×</span>
<hr>
</div>
</form>
</div>
As of right now, I have this:
<body onload = "welcome()">
function welcome() {
document.getElementById('id05').style.display='block';
}
...which loads one of the modals on every refresh of the page.
Thanks!
add an event listener to your form submission buttons whenever they click 'sign up' or 'log in' that turns your modals display from none to block. Here's an example in which I will grab an element with the class form-Submit and display the welcome modal whenever they click the form submission button. I hope this helps
var formSubmit = document.querySelector('.form-Submit');
formSubmit.addEventListener('click', () => {document.getElementById('id05').style.display='block'})
Related
I have a popup form in html based website ,in popup form there are three options,if I click on first option then it goes to that particular section,but popup form remains there.if I click on close then form will close.but I want automatically form close if I visit particular section.
below is my code.
Picture of the website
<html>
<body>
<!-- popup form start here -->
<div id="popScroll">
<div class="popScroll">
<div class="popup">
<div id="option">
<!-- Home -->
<!-- Close -->
<!-- <button class="btn" id ="close-btn"> Close </button> -->
<div class="text">
<img src="demo.png" alt=""><br>
Chemical
</div>
<div class="text">
<br>
logistics
</div>
<div class="text">
<img src="demo.png" alt="polymer">Polymer
</div>
<!-- <span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" class="boxi">Close</span> -->
</div><br><br>
<span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" >Close</span>
</div>
</div>
</div>
</body></html>
I'm not exactly sure what you are trying to achieve but I assume you want to close a popup whenever you scroll down to a certain section within your site?
To achieve this, you could use the Intersection Observer.
More information here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
What you can do is add click functionality on options using click listener and close modal after a user clicks on options.
// NOTE: choose appropriate id according to your code
const popup = document.querySelector('#popup'); // id is popup id
const first = document.querySelector('#first'); // first is id of first option
first.addEventListener('click', function sectionClickListeners() {
// Perform some tasks...
popup.style.display = 'none';
})
This website gives a good understanding of using modals and gives different examples.
https://jquerymodal.com/
I have a dummy Bootstrap modal with a very simple JS alert meant to be triggered when the submit button is clicked. The code is live here and this is what it looks like:
<div class="modal fade" id="contact" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" name="contact-form">
<div class="modal-header">
<h4>test</h4>
</div>
<div class="modal-body"><p>This is body</p></div>
<div class="modal-footer">
<button type="submit" id="submit" class="btn btn-primary btn-lg" onclick="alert('something');">Send</button>
</div>
</form>
</div>
</div>
If you visit the site, you can trigger the modal by clicking on the contact link in the top navigation menu. The modal looks like this:
As you can see, there's just one field and a submit button. The button's onclick() event is set to alert the word "something" on the screen. This works fine except that when you close the alert, the page refreshes with a "?" appended to the URL. How do I prevent this refresh and where does the question mark come from?
At first I thought that it happens because the button has property type set to submit, so I'd recommend to remove this property completely, and the trailing question mark would probably not appear anymore. But it does.
What really needs to be done is event default action has to be prevented. To do that, return false right there in the onclick event callback function:
<button onclick="alert('something'); return false;">...</button>
This way you, well, return false, and this is perceived as if you want to prevent further execution of the click event, effectively submit operation.
i has file within my wordpress theme this file contains the signin, signup, lostpasswors and reset password forms with the required php codes. and in my header i have two buttons created by bootstrap codes us follow.
<div class="col-sm-3">
<div id="user-notlogged-in" class="pull-right btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-info"><a class="signin" href="<?php echo bloginfo('url') ?>/login"><?php _e('Sign In'); ?></a></button>
<button type="button" class="btn btn-default"><a class="signup" href="<?php echo bloginfo('url') ?>/login"><?php _e('Sign up'); ?></a></button>
</div>
</div>
and in my login-register.php file i have above forms like below
<div id="signin-form">
</div>
<div id="signup-form">
</div>
<div id="resetpass-form">
</div>
<div id="newpass-form">
</div>
this link below contains full code in my login-register.php file
login-register.php
my questions
i want when click on Sign In link only show me signin-form
i want when click on Sign Up link only show me signup-form
i want when i click on Lost Password? Link only show me resetpass-form
i want when send me reset password mail and i clcik on reset password link only show me newpass-form
What you're looking for is some simple jquery. Try something like...
onclick=$('#signin-form').show();
there is one Way i hope it will help You.
You can Use Jquery for Show And hide forms.
`http://jsfiddle.net/ffor00ps/3/`
Try it may be this will help to solve your problem
I am designing a website where i have put the modal for signup that when the user click on signup button the modal will came up but here in my website modal is working properly but content in it is not clickable please help me out.Here is my coding.
<li>signup</li>
<div class="modal hide fade" id="show">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h1>Tittle</h1>
</div>
<div class="modal-body">
<p>The modal Body</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
And the java script i have written for it is here.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$("#showup").click(function(){
$("#show").modal();
});
</script>
The screenshots of modal will be helpful for understanding me.
These are good login modal example, you can see them to see how they were written :
Modal with tabbed content
Login form in a modal
use anyone of them the normal way you put your modal please see this see this link for more explanation: modal
i hope they will help you.
Try to use something like:
.modal {
z-index: 10000;
}
It's probably because the z-index of your modal is lower than the z-index of other element. So try to use firebug or chrome inspector tools to figure it out
If a user clicks the delete user button, I display a modal window asking for confirmation of the delete. Within the modal window, if they click yes, then a function is called to delete the user (via ajax). If no, then the modal window is just closed. That is how it should work. But I don't know how to pass the user ID to the yes button. Below is what I have so far to delete the user but it may be way off.
<div class="modal hide fade" id="DeleteUserModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Delete User?</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<p>Are you sure you want to permanently remove this user?</p>
</div>
</div>
<div class="row-fluid">
<div class="span12">
Yes, I'm sure
<button class="btn" type="submit" data-dismiss="modal">No way!</button>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
I do not know how to pass the userid to this specific line in the above modal window:
Yes, I'm sure
While I am using jQuery, the answer can be written in JavaScript.
Use the data-attributes. They'll make you happy. http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/
Rather give this node:
Yes, I'm sure
..an id:
<a id="delete-user-link" class="btn btn-danger">Yes, I'm sure</a>
..when you want to delete a specific user (thus click on the delete button in the list), set the data-attribute for the specific user-id:
$(".delete-button").click(function(){
$("#delete-user-link").data("user-id", $(this).data("user-id");
// show the modal
});
this does require your delete-buttons (in the list) to have a data-attribute, like:
<a class="btn" data-user-id="123">delete</a>
and add a small jQuery method:
$("#delete-user-link").click(function(){
var userId = $(this).data("user-id");
// do your delete stuff here
});
That should do the trick!
For the click to load the modal window:
var delete_id = 1234;// Set this to the appropriate value
$(".span12 a.btn-danger").attr("href", "javascript:deleteUser("+delete_id+")");