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.
Related
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.
I have a link like:
<a href="javascript:;" data-toggle="modal" data-target="#modal-dialog" class="my_table" >
And I want to bind jquery action that will work before modal dialog show.
$(document).on('click','.my_table',function(){
alert('Execute before!');
})
But modal dialog still visible. First I get alerted, then modal dialog. How to make dialog wait until the alert is closed/callback processed? Please don't suggest to open dialog by JQuery, it doesn't work in current CSS/HTML mockup.
Create javascript function and call it on your element click.
<script>
function callFunc() {
alert('Execute before!');
$('#modal-dialog').appendTo('body').modal('show');
}
</script>
Maybe you must handle modal show event:
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function() {
alert('Execute before!');
})
});
I have a fullcalendar on my page. On it I have an add event button. That calls a javascript function that opens a modal view allowing the user to add an event.
function showAddMeeting() {
var current_date = $('#calendar').fullCalendar('getDate');
$("#modal").load('modal.php?type=meeting&action=add&date='+current_date);
}
This works perfectly. Now, I have another function to edit the meeting:
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}
When I put this on the button, it works fine. But when I add it as a function to the event, it does not work.
eventClick: function(event) {
showEditMeeting(event['id']);
}
When I click the event, I get the alert of the working link, but I never get a modal popover.
EDIT:
I've figured out it's because I'm not calling
data-toggle="modal" data-target="#modal"
Does anybody know of how to call that through javascript?
Bootstrap has all the methods available for the modal in "modal.js", this is included in the minified pack.
You need to use it as follows.
Original
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}
Becomes
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id).modal('show');
}
Notice the additional .modal('show');
Please note, I've not tested this code.
More information: http://getbootstrap.com/javascript/#modals-methods
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
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
I have a modal that I call onclick like so...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
So I tried
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Try this
Here is the old DEMO:
EDIT:
(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
I am using this in my layout to capture all modals and focus on the first input
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
Instead simple on():
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
$('body').on 'shown.bs.modal', '#modal', ->
Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
I can think of two ways to solve this problem:
Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry #keyur, I mistakenly edited and saved as new version of your example)
Call focus() in shown event like what #keyur wrote.
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents() on document ready.
Use:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
I had the same problem with the bootstrap 3 and solved like this:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap has added a loaded event.
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
Bootstrap modal show event
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
A little cleaner and more modular solution might be:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
Or using your ID as an example instead:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
Hope that helps..