I have an angular-ui modal window, and, obviously, when I click outside the modal(backdrop) the modal closes.
However, I would like to change this behavior, for example, when I click on the backdrop, the popup window shows up with 2 buttons (OK and Cancel) and the modal will NOT close on Cancel.
The popup phase is easy, but I am not sure how to stop the modal from closing.
Could anybody help me with this, please? Thanks a lot!
As Hurix mentioned, Give
backdrop : 'static'
in your modal options which will not close the modal window when backdrop is closed.
Then apply a click event on backdrop:
$('.modal-backdrop').on('click', function(){
if (confirm('close modal') == true){
//dismiss your modal instance
} else {
//return
}
});
This click function will give a confirmation popup with ok and cancel button and you can handle whatever you want to do when they are clicked.
Related
I am trying out Modal boxes in my project and I came upon a problem, that I am unable to close the modal box when a click is made outside of the Modal box. I tried the following code, but this closes the modal box at the same instant it is opened. I tried using setTimeout method too. Its not working. Could anyone help me out with this?
const gstModal=()=>{
g=document.getElementsByClassName("modal-gst")[0];
g.style.display="block";
document.addEventListener('click', function(event) {
var isClickInside = g.contains(event.target);
if (!isClickInside) {
closeGST();
}
});
}
function closeGST(){
document.getElementsByClassName("modal-gst")[0].style.display="none";
}
If you have an overlay div along with the popup then you can handle the click easily on the overlay div click.
Here is a sample modal popup by using HTML & JS
https://www.w3schools.com/howto/howto_css_modals.asp
I have 2 radio buttons on an ASP.NET WebForm page. I have a modal popup that is to be shown only when going from one of the radio buttons to the other, but not the other way. In other words, here are my choices:
if radio button 1 is clicked then the modal popup is shown.
If radio button 1 is currently selected and radio button 2 is clicked then the modal popup should NOT be shown.
I have a javascript function that toggles the show and hide but I briefly see the popup when #2 logic is performed. Here is the js function:
$(function () {
$('#<%=RadioButtonListServiceLevel.ClientID%>').click(function () {
var CustomerCountry = $('#<%=HiddenFieldCustomerCountry.ClientID%>').val();
var ServiceLevelSelected = $("#<%=RadioButtonListServiceLevel.ClientID%> input:checked").val();
if ((CustomerCountry != "US" && CustomerCountry != "CA") && ServiceLevelSelected == "24") {
$('#InternationalServiceLevelModal').modal('show');
} else {
$('#InternationalServiceLevelModal').modal('hide');
}
});
});
Any idea why the popup modal dialog would briefly show when the action described in #2 is performed?
Thanks
I was just playing around a bit using an 'alert' and when I used the 'click' event, like you have, the alert fired twice: as soon as i clicked - before the button visibly changed value, then again after the button visibly changed value.
I changed 'click' to 'change' and the alert only fired once. Could be the fix?
// changed 'click' to 'change'
$('#<%=RadioButtonListServiceLevel.ClientID%>').change(function () {
Can I change backdrop to 'static' while my modal is open?
I have modal with form submit button. When I click this button I show loading spinner on my modal and that is the moment when I want to change backdrop to static
I tried $('#myModal').modal({backdrop: 'static', keyboard: false}), but I can still close my modal by clicking the backdrop or using escape button.
Second step should be changing backdrop back to true, but I didn't try this yet, because first I need to set backdrop to static.
I could set backdrop to static on modal show, but I want to avoid this and change it after submit.
Any ideas?
Ok I solved this. Maybe it is not the best solution, but it is working for my special case.
I added $('#myModal').off('click'); just after I show loading spinner on submit. This prevents from closing modal with mouse click.
There was a problem with disabling escape button, because browsers stops page loading when user press this button. So I decided to hide the spinner to unlock the form with this code:
$(document).on('keydown',function(e) {
if (e.keyCode == 27) {
$('#myLoadingSpinner').hide();
}
});
Edit:
I found another solution for backdrop:
$('#myModal').data('bs.modal').options.backdrop = 'static';
I tried this also for keyboard = false, but it doesn't work.
I had a modal that could be opened 2 different ways. When the user opened it one way, I wanted them to be able to close the modal. When they opened it the other way I didn't want them to be able to close it.
I found this question and used the solution from the original poster. I also tried adding keyboard which now works:
$('#myModal').data('bs.modal').options.backdrop = 'static';
$('#myModal').data('bs.modal').options.keyboard = false;
I had a different JavaScript object returned and thus the following solution:
$myModal.data("bs.modal")._config.backdrop = value;
The simplest method I've come up with is attaching to the hide.bs.modal event and calling preventDefault(). This doesn't technically set the backdrop to static, but it achieves the same effect in a toggleable manner.
let $myModal = $('#myModal');
function preventHide(e) {
e.preventDefault();
}
// if you have buttons that are allowed to close the modal
$myModal.find('[data-dismiss="modal"]').click(() =>
$myModal.off('hide.bs.modal', preventHide));
function disableModalHide() {
$myModal.on('hide.bs.modal', preventHide);
}
function enableModalHide() {
$myModal.off('hide.bs.modal', preventHide);
}
(Disclaimer, I didn't test making buttons allowed to hide the modal, as that wasn't my scenario. If it doesn't work, just call .modal('hide') from the click() callback.)
You can disallow closing of a modal when clicking outside of it, as well as on esc button. For example, if your modal ID is signUp:
jQuery('#signUp').on('shown.bs.modal', function() {
jQuery(this).data('bs.modal').options.backdrop = 'static';
jQuery(this).data('bs.modal').options.keyboard = false;
});
I found, that in Bootstrap 5 this is slightly different:
modal = new bootstrap.Modal($('.modal'));
modal._config.backdrop = 'static'; // or true
When a button clicked it shows a modal box. That modal box contains two buttons. OK and Cancel button. When we click on the OK button it shows an alert message box, up to this I got correctly. But I want to disable the modal box when an alert message pop up. I tried lot of methods like
$("modalFileStruct").('disabled', true);
$("#modalFileStruct").fadeOut("slow");
$("#modalFileStruct").addClass("fade");
$("#modalFileStruct").setFocusable(true)
$("#modalFileStruct").css('style','background-color: #000; opacity:1; z-index:1000;');
document.getElementById("modalFileStruct").removeAttribute("tabIndex");
$('#fileStruct').blur();
$("#modalFileStruct").css("position","relative","z-index","99");
$('#modalFileStruct').fadeIn('slow');
$('#modalFileStruct').fadeOut('slow');
But it doesn't satisfy my need. Could anyone help me?
This is my code
$("#modalFileStruct").modal();//This is pop up the modal box
//This is the click function of OK button inside the modal box
function fileInfoClicked(){
alertMessage('Error',"Attribute name contains special characters: " + inps[i],
'error');
return;
}
//Code for alert message box
function alertMessage(title, message, type) {
$.msgBox({
title : title,
content : message,
type : type,
modal : true
});
}
$("#modalFileStruct").modal();//This is pop up the modal box
//This is the click function of OK button inside the modal box
function fileInfoClicked(){
$("#modalFileStruct").modal("toggle");
}
I guess you want the user to force to click OK button instead of closing the modal when user clicks on page. by the way which plugin are you using? In Bootstrap use data-backdrop="static"
I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}
I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})
You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});