I have two modals, one for registration, one for login. Within each modal I have a link to the other modal like this:
Modal Register
<span id="btn-open-login"><a id="btn-open-login-link">Back to Login</a></span>
Modal Login
<span id="btn-open-register"><a id="btn-open-register-link">Register here!</a></span>
To close and open the modal without body scroll I use this peace of js:
js
$('#btn-open-register').on( 'click', '#btn-open-register-link', function () {
$("#modalLogin").modal("hide");
$("#modalLogin").on("hidden.bs.modal",function(){
$("#modalRegister").modal("show");
});
});
$('#btn-open-login').on( 'click', '#btn-open-login-link', function () {
$("#modalRegister").modal("hide");
$("#modalRegister").on("hidden.bs.modal",function(){
$("#modalLogin").modal("show");
});
});
The modal Login opens first as default.
It works fine for the first round. But when the Login modal is opened for a second time, I can't close the modal anymore. It just keeps switching.
What am I missing?
Here a fiddle: https://jsfiddle.net/tk1rbys0/
You can use modal('toggle') instead of "show" and "hide".
Also, you don't need to listen to the hidden.bs.modal. The way you've structured your code, it simply means when you press a modal button, it closes the current modal, when its 'close' event fires, the other modal is shown. You get stuck in a loop, which is your current situation.
Try replacing your code with this:
let modalLogin = $('#modalLogin'),
modalRegister = $('#modalRegister');
$('#btn-open-register').on('click', '#btn-open-register-link', function () {
modalLogin.modal('toggle');
modalRegister.modal('toggle');
});
$('#btn-open-login').on('click', '#btn-open-login-link', function () {
modalRegister.modal('toggle');
modalLogin.modal('toggle');
});
Hope this helps.
Update:
Switch the modals in reversed order, that way you will always have one visible, which will prevent the scrollbar from showing:
$('#btn-open-register').on('click', '#btn-open-register-link', function () {
modalRegister.modal('toggle');
modalLogin.modal('toggle');
});
$('#btn-open-login').on('click', '#btn-open-login-link', function () {
modalLogin.modal('toggle');
modalRegister.modal('toggle');
});
Update 2:
Taking the scrollbar into account, you can update your code to remove the event listener, once the other modal has been shown.
$('#btn-open-register').on( 'click', '#btn-open-register-link', function () {
$("#modalLogin").modal("hide");
$("#modalLogin").on("hidden.bs.modal",function(){
$("#modalRegister").modal("show");
$("#modalLogin").off("hidden.bs.modal"); // allow closing
});
});
$('#btn-open-login').on( 'click', '#btn-open-login-link', function () {
$("#modalRegister").modal("hide");
$("#modalRegister").on("hidden.bs.modal",function(){
$("#modalLogin").modal("show");
$("#modalRegister").off("hidden.bs.modal"); // allow closing
});
});
This should allow you to close an opened modal without showing the other one.
Related
I have a page with several popovers that are acting as additional information for products.
When functioning as intended a user should be able to click on a popover, and when they click on another popover the previous popover closes. This functionality already exists in my current code, however, when a user does this the previous popover's button does not have its toggle state reset. This means when the user clicks on the second popover and tries clicking on the original one they have to click twice (once to set the toggle back to original state, and once to reopen it).
I would like to know how to reset the toggle state of all other popovers when a new popover is opened.
You can see my current working code here:
http://codepen.io/kcarskadon/pen/BLJdkJ?editors=1010
Here is the current jquery I am using:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).hide()
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
Thanks for the help!
You're hiding the item, not using the popover hide function, try it like this:
$(function () {
$('[data-toggle="popover"]').popover({
html: 'true'
})
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
$(document).on('show.bs.popover', function(){
$('.popover').not(this).popover('hide');
});
$(document).on('hidden.bs.popover', function (e) {
$(e.target).data("bs.popover").inState.click = false;
});
});
When I open a Bootstrap modal I want to perform an action, in this case an alert().
How do I check if a Bootstrap modal is open so I can perform an alert()?
I don't call the modal with a jQuery selector, I just let Bootstrap do that part of work.
This is my code but it doesn't work:
if ($("#myModal").data("bs.modal") && $("#myModal").data("bs.modal").isShown){
alert("test");
}
You can use the bootstrap modal events :
$('#myModal').on('shown.bs.modal', function (e) {
alert('modal is now loaded');
}
Or you can use this event before the modal is shown :
$('#myModal').on('show.bs.modal', function (e) {
alert('modal is not displayed yet');
}
look Here for more information about JavaScript bootstrap
I have it figured out, it appears that my approach is the wrong way to do it, instead I should have called this inside a function:
$('#myModal').click(function(){
alert("myModal is clicked");
})
This way, the alert() will only show if the function has succesfuly executed.
What I'm trying to achieve is toggling the sidemenu on click anywhere in the body except inside sidemenu div itself. I currently can toggle the sidemenu from its toggle link (comment out line 13-14 in js fiddle) but not by clicking anywhere on body. This is the concerned code:
$('body').bind('click', function (e) {
var opened = $('body').hasClass('sidemenu-open');
if (opened === true) {
$('.sidemenu').removeClass('is-visible');
$('body').removeClass('sidemenu-open');
}
});
JSFIDDLE
I know I can add a wrapper for the content but I don't have much flexibility in the HTML structure.
There are two problems. First, when you click on the link, the click is bubbling out to the body. So the menu toggles open, then it toggles closed again, so nothing happens. Use event.stopPropagation() to prevent that.
Second, when the side menu is closed, <body> is just the one line containing the link. If you want to be able to click anywhere in the window, use $(document) rather than $('body').
$(function () {
$('.sidemenu-toggle').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$('.sidemenu').toggleClass('is-visible');
$('body.sidemenu-enabled').toggleClass('sidemenu-open');
$('.sidemenu').toggleClass('sidemenu-open');
});
});
$(document).on('click', function (e) {
var opened = $('body').hasClass('sidemenu-open');
if (opened === true) {
$('.sidemenu').removeClass('is-visible');
$('body').removeClass('sidemenu-open');
}
});
DEMO
Your click on the side menu is propagating down to the body and activating that handler as well - preventDefault isn't what you're after, you need to return false as well. Try this click handler instead.
$(function () {
$('.sidemenu-toggle').on('click', function (event) {
$('.sidemenu').toggleClass('is-visible');
$('body.sidemenu-enabled').toggleClass('sidemenu-open');
$('.sidemenu').toggleClass('sidemenu-open');
return false;
});
});
You can get the target element in click event by which you can have further conditions.
$('body').click(function(evt){
if(evt.target.id == "your_sidemenu_id"){
//do nothing
}
else{
//do the toggle here as this will be implemented whenever any element is clicked other than your sidemenu
}
});
I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle
Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/
I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.
Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle
In a very simple jQuery modal, I close the modal by clicking on CLOSE as
$('#close').click(function(e) {
e.preventDefault();
$('#overlay, #alertModalOuter').fadeOut(400, function() {
$(this).remove();
});
});
How can I close the modal by clicking whether on CLOSE button (which is inside the modal windows) OR clicking anywhere outside the modal window.
Changing your function like so should work:
$('#close, #overlay').click(function(e) {
e.preventDefault();
$('#overlay, #alertModalOuter').fadeOut(400, function() {
$('#close').remove();
});
});
I found it helpful to include:
$('.item-modal').click(function(e) {
e.stopPropagation();
});
Add the same click listener to your overlay.
I know this question pertains to jQuery, but here's how I did this in Vue on my modal component in case anyone finds it helpful. My modal HTML is basically lifted directly from this: https://v2.vuejs.org/v2/examples/modal.html
I set two #click attributes, one on the outermost modal element (modal-mask) that calls my close() method (which emits the close event to the parent component) and one on the actual modal window element (modal-container) that with the .stop event modifier (#click.stop) to stop the click from bubbling up to the parent element (modal-mask). Works like a charm.