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.
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/
So I have a form where double-clicking a field brings up a custom modal window. The buttons for "Save" and "Cancel" on the modal window have "click" events that call hide() on the modal window layer. However, some of our users naturally double-click things. Double-clicking the save or cancel buttons fires the click event and hides the modal window but also fires the double-click event of the field that was under the modal window causing the modal window to display again. I know using a setTimeOut() and delaying the hide() of the modal window will resolve the issue but I prefer not to degrade the responsiveness of the UI if possible. Any suggestions?
Here is a fiddle to generally explain the problem.
https://jsfiddle.net/e51rc24j/4/
$(function() {
$(".field").on("dblclick", function(ev) {
$(".hoverlayer").show();
});
$(".hoverlayer").on("click", function(ev) {
var thisLayer = this;
$(thisLayer).hide();
/* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
setTimeout(function(){
$(thisLayer).hide();
}, 300);*/
});
});
At first I thought the problem was propagation, so I added a stopPropagation to your event. But then I found out that it's not the double click that's propagating. The problem is something completely different, namely that the SECOND click (of the double click to close the black overlay) LANDS on the input field again, which triggers the double click event on the input box again.
So all you have to do, is move the SAVE and CANCEL buttons so they are not directly on top of the input field.
I have made a little change to your jsfiddle to illustrate:
https://jsfiddle.net/e51rc24j/6/
If you double click in the "PROBLEM", the modal black div will open again, because your second click lands INSIDE the <input> text field.
However, if you double click anywhere else in the black div ("Not a problem"), it will not open.
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.
I have a situation where I have a model open and when I close it and open it very quickly I am seeing a really very odd behavior like backdrop is not disappearing and modal is not showing.
My code is as follows
//Opening and Closing Modals
$("#modal").modal("show");
$("#modal").modal("hide");
$("#modal").modal("show");
I created a JSFiddle.
You should only hide the modal when it is completely shown.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
Review the modal events here
http://getbootstrap.com/javascript/
$('#myModal').on('show.bs.modal', function (e) {
$('#myModal').modal('hide');
})
I have an ASP.NET page that contains an tag which opens a modal dialog. This modal dialog contains a control that contains a button which saves some data and closes the modal dialog. How to refresh the parent page that button is clicked?
You can run this javascript line from the modal:
window.top.location.reload();
or
parent.location.reload();
If you do not have access to the modal, you can set a handler for the close as
ModalObject.onbeforeunload = function () {
window.top.location.reload();
};
where ModalObject is the handler that you have when you creates it.