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!');
})
});
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 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
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.
After Bootstrap modal is shown, my app JavaScript is not working.
When I execute JavaScript from console then it is working, but my app JavaScript does not work.
Can somebody please give me advice how I can solve this issue?
HTML file:
<button type="button" class="btn btn-primary" id="save-category">Save changes</button>
JavaScript file:
var jquery = jQuery.noConflict();
jquery(window).load(function() {
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
Try to use delegate instead of event binding
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery(document).on('click', '#save-category', function() {
jquery('#myModal').modal('hide');
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
To fix this, you should register your click event to after you show your modal view:
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
// Register the event here
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
});
Also note that the load event has been deprecated in jQuery 1.8 so you might want to use jQuery(document).ready( for initialising your script code unless you need to wait for images to load.
I'm trying to create a basic modal myself and I'm having a little bit trouble here (maybe it's because I'm an expert working with jQuery - don't take it seriously).
I have this HMTL markup:
<div id="modal-boxes">
<div id="modal-updates" class="modal-content">
Content for modal box here.
Close
</div>
</div>
<div id="modal-mask"></div>
So, I made a function that tells the modal box to close and to make disappear the #mask div. And another one to when I click outside of it, it closes anyway. In other words, clicking outside the #modal-updates div is the same that clicking on close button. But the problem is that when I want to click inside the #modal-updates div (should not disappear) it closes anyway. Here is my javascript code:
$(".modal").click(function(e){
e.preventDefault(); // Cancel the default link behavior
$("#modal-mask").fadeTo(400, 0.4);
$("#modal-boxes").fadeIn();
var getName = "#" + $(this).attr("name");
$(getName).fadeTo(400, 1);
});
function closeModal() {
$("#modal-mask, #modal-boxes").fadeOut();
}
$(".close-modal").click(function(e){
e.preventDefault();
closeModal();
});
$(".modal-content").click(function(){
closeModal();
});
Any help?
Regards, Tiago Castro
Try:
$('#modal-updates').click(function(e) {
e.stopPropagation();
});
If done right, this will stop $("#modal-boxes").click() from triggering.
[edit] fixed a typo and added link to jsFiddle with it working
Why not using the modal dialog of jQuery?
About your example :
1) for the link I prefer to do something like:
Close
That way no need to deal with things like preventDefault or click event
2)I guess that instead of binding your click event to ".modal-content" you wanted to bind it to "#modal-mask" ;)