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"
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 () {
i was trying to reset my form when a close button was clicked.
this is my script.
$('.modal').on('hidden.bs.modal', function () {
console.log($(this).find('#form6')[0].reset());
})
when i console this it returns undefined. but when i remove [0].reset() the console returns a length:1, 0:form#form6, prevObject:r.fn.init[div#modalForm.modal.fade] but when i use
$('#form6')[0].reset() on form submit it works.. dont know why it doesn't work on button close..
i have a modal form which when i click a function is called that will append a certain data to my select tag. but when i close the modal and reopen it the data that was prev called stayed on my select tag then the function again was called so what happen was the data from my select tag duplicates.
so i was trying to reset the form when my modal was close.
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.
How can I show a confirmation modal dialog with the information from the form so that user can confirm what they selected in the form and it submits only if the user says so?
confirm.$("#submit-button").click( function(){
if (validator.form()==true) {
tb_show("Countdown", "are_you_sure.html?height=100&width=200&modal=true", "");
//some check here maybe?
}
return false;
});
tb_show can display a hidden DIV, so perhaps the best way is to fill that div with the stuff you want the user to confirm and then simply show that. The DIV could hold a YES button that when clicked performs the actual submit
<script>
$('#confirmDiv').html("Are you sure you want to...");
tb_show("Countdown", "#TB_inline?height=100&width=200&inlineId=confirmDiv");
...
<body>
...
<div id='confirmDiv' style='display:none'></div>