I have the following code:
$('boddy').click(function(e) {
bootbox.alert("clicked!");
});
When a page is clicked, I see a popup window with "clicked" displayed. However, if I click the OK button to close it, the popup shows up again and never ends.
Interestingly, I tried the following code:
$('boddy').click(function(e) {
alert("clicked!");
});
After I click the OK button in the popup, it never shows up again.
Thanks!
Bootstrap modals (and therefore Bootbox modals) are simply <div> elements with higher z-indexes than the rest of the page content. They're still contained with the body of the page, so when you click on any element in the modal, it propagates through every parent element of the modal. Since the body tag is the top-level parent, clicking a button in the modal ultimately also clicks the body element.
Related
I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/
I have a web page that opens a reveal modal on load, and in this modal, I have a link that can open a 2nd modal. When the 2nd modal closes (either by clicking the close button, or by clicking outside the modal), I would like to reopen the first.
For the close button, I can do it via adding a data-reveal-id to the link that has the close-reveal-modal class. But when I try to bind to the close property, the 1st modal opens, but then the background changes back to normal, and the 1st modal can no longer be closed by clicking outside the modal. Then, on closing the 1st modal with the close button, the whole screen darkens as though a modal was opening. Am I doing something wrong, or is this a bug?
My code is as follows:
$(function(){
$("#modal2").foundation("reveal", {
close: function() {
$("#modal1").foundation("reveal", "open");
}
});
$(document).foundation();
});
OK, so after some experimentation, I found out that in order to do what I wanted to I had to bind the function, not set it in the initialisation phase. Thus:
$("#modal2").bind("closed", function() {
$("#modal1").foundation("reveal", "open");
});
And I set this script after the declaration of the 2 modals.
I'm trying to have multiple pop-ups in a page using two jquery functions. One of them is a button that opens up the pop-up (which is nested inside the button itself, to make it easy to position the pop-up next to the button). The other function is a button that should close the pop-up (which is inside the nested div).
Problem is, the div which makes up the first button extends it's functionality to the opened pop-up, effectively making it so that every time I want to close the pop-up, it opens up again. (or at least that's what I think it does, because after I un-nested the open button from the pop-up, the thing started working)
Here's the code for the javascript
jQuery(document).ready(function(){
$(".button_open").click(function()
{
$(this).children().css("display","inline");
});
$(".button_close").click(function()
{
$(".pop-up").css("display","none");
});
});
Html
<div class="button_open">
<div class="pop-up">
<div class="button_close">X</div>
Text
</div>
</div>
The page will have multiple pop-ups each containing different stuff, and if possible, I'd want to have those two functions perform all the open/close stuff, instead of having a ton of functions.
So basically I'd like to know if there's any way of making the close button function inside the nested div
If you make a click on your close-button - you make a click on the parent also.
Try to make your code so:
$(".button_close").click(function(event)
{
$(".pop-up").css("display","none");
event.stopPropagation();
});
stopPropagation function prevents bubbling of the event to the parent. Then it should not bubble to the parent and should not cause fireing of click on the parent. Please let me know if it doesn't help.
I have a gallery type of interface that I'm trying to get to work, I want to be able to click outside of it to close it, however there is a div inside that contains the main elements, photos, and things to click. However as it is now when you click inside the div it closes, because it's a child in the element that when you click it closes.
I have the divs like this:
<div class="theater-wrapper">
<div class="theater-container"></div>
</div>
everything is loaded into theater-container via ajax.
When you click .theater-wrapper it should fire the event to close, however when you click theater-container it shouldn't.
This is how I have tried to close it:
$(".theater-wrapper").click(function (event) {
$('.theater-wrapper').hide();
event.stopPropagation();
});
I have a jsfiddle showing this in action: http://jsfiddle.net/Cs8Kq/1/
If you want to stop propagation of the click event on .theater-container, then that's where you need to put the command. Right now you have it applied to the .theater-wrapper click action.
$(".theater-container").click(function (ev) {
ev.stopPropagation();
});
I have a div that opens when user clicks link. And the div sort hovers over the link (its a more info box/div) and the div has a links and text. Now what I want is that when user cliks outside of the div it closes/disappears. But I want the links inside of div to work. Atm the javascript for that closin is like this:
$('html').click( function() {
$('#moreInfo').hide();
});
But the problem is that when user clicks the link inside of that #moreInfo the link doesn't work and the div just closes (it should go to different page from that link, not close the div).
You can do this:
$(document).click(function() {
$('#moreInfo').hide();
});
$('#moreInfo').click(function(e) {
e.stopPropagation();
});
By using event.stopPropagation() on the click handler for the <div>, clicks coming from inside won't bubble up to where you have a handler to close it...which is what's currently happening.
If I understood correctly, you don't want to hide the DIV, you want to remove it from the DOM tree.
If this is the case, try this:
$('#moreInfo').remove();
Just remember to keep the reference to the item, so that you can re-add it when you need to.
I recommend you to put a closing X on the up right corner of your DIV (like a window)... In other case, you can handle blur event of a "special" element inside your div.
Hope that helps,