Develop Reference

Event Handler for closing modal popups

I'm doing some selenium web testing and on this one site I'm automating a modal popup would sometimes show up randomly and would prevent me from grabbing other elements. I know there are built in Selenium methods for closing the popup like alert().dismiss() but this would mean I know when the popup would show up and I don't it shows up at random.
I would like to know how to attach an event listener for when these modal popups show up and have a callback that would close out of it. please and thanks

If you know where is the code that triggers the popup, you can simply inject few line of javascript in webdriver and nullify the popup.
As an example, if the popup appears after a couple of seconds and is triggered by the following code:
setTimeout(function () {
showModal()
}, 5000);
you could override the modal function in the webpage with the following (Java) code:
driver.executeScript("showModal = function () {}");
the next time the modal is executed this will trigger an empty function.

Is there a way to close Bootstrap modal without call the hidden handler

I use Bootstrap3 Modal. I bind the 'hidden.bs.modal' with a handler, but in a special case I need to just close modal without call the hidden handler, after that, next time user open the modal and close it again, then hidden handler get called as normal:
//suppose modal is shown, unbind first to prevent the handler run
$('..').unbind('hidden.bs.modal');
$('..').modal('hide');
//rebind the handler
$('..').bind('hidden.bs.modal',function(){//...});
But seems not to work: it still calls the handler.
Is there a way to achieve this?
Thanks

I felt same problem earlier and used this hackish to prevent calling hidden callback in some cases. hope it will help you
function close_modal_without_callback() {
$('#myModal').off('hidden.bs.modal');//`off` to remove event handler attached with `on`
$('#myModal').modal('hide'); // hide modal
setTimeout(function() { //to add little delay to reattach the event
$('#myModal').on('hidden.bs.modal', function(e) {
hidden_handler(); //handler function
});
}, 1000);
}

bootstrap, modal dialogs, shown.bs.modal event doesn't fire

I'm using modal dialog with remote option:
<a target="profile-banner" data-target="#edit-slide-dlg" href="/Banner/SlideEditModal/1/1"
data-toggle="modal" class="banner-slide-control">Edit</a>
Where:
<div id="edit-slide-dlg" class="modal fade" tabindex="-1"></div>
Also, I'm listening for shown.bs.modal event where I use event.target property:
$("body").on("shown.bs.modal", function (event) {
// do something with event.target
}
Some reason this event is not fired when I open dialog for the first time. And it gets fired for the second time only. I tried to browse bootstrap scripts and found this code (see my comment):
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
.one($.support.transition.end, function () {
that.$element.focus().trigger(e) //THIS LINE NEVER EXECUTED AT FIRST DIALOG OPENING
})
.emulateTransitionEnd(300) :
that.$element.focus().trigger(e)
So, I turned off transition as a workaround, It made event be fired for the first time, but, event.target is empty string. For the second time event.target contains appropriate dialog HTML. Is this problem with my code or bootstrap?

I had the exact same Problem. I could fix it with the solution to this StackOverflow question: Bootstrap modal 'loaded' event on remote fragment
Basically you have to open the modal manually and implement the Ajax loading yourself. Something like:
$modal.modal({
'show': true
}).load('/Banner/SlideEditModal/1/1', function (e) {
// this is executed when the content has loaded.
});

For anyone coming here late and wading through lots of related issues, this answer from related post solved the OPs issue exactly for me...

jQuery click handlers not triggered inside a modal window

I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.

When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});

Kendo UI/jQuery click event running multiple times

I'm using Telerik's jQuery software called Kendo UI, to create a modal popup window. I'm having a rather odd problem with a Kendo modal popup box, which contains a "Confirm"/"Cancel" confirmation. The first time I open the confirmation window & click either button (Confirm or Cancel), the window works correctly. The 2nd time I open this popup window & click a button, my Kendo's click event fires twice. The third time I open the window, the click event fires 3 times, etc. I can't figure out why. It should only be firing once.
Here's my JS code. The click function that's firing twice is in both the Confirm & Cancel sections, beginning on the line that reads .click(function () { :
var kendoWindow = $("#delete-confirmation").kendoWindow({
title: "Confirm",
resizable: false,
modal: true,
center: true
});
kendoWindow.data("kendoWindow")
.center().open();
kendoWindow
.find(".delete-confirm")
.click(function () {
kendoWindow.data("kendoWindow").close();
destroyItem();
})
.end();
kendoWindow
.find(".delete-cancel")
.click(function () {
kendoWindow.data("kendoWindow").close();
})
.end();
Any idea what I'm doing wrong?
Thanks

Sounds like you should initialize your dialog only once (create it and add your handlers). Then every time you need the dialog to show you only call your
kendoWindow.data("kendoWindow").center().open();
line of code. It looks like each time you go to open the dialog its adding a new click hanlder and the previous handlers and the new handler will all be called on the click event.