Dialog Box not Closing After pressing X Button - javascript

I've one scenario. I'm opening a dialog box, but my parent window refreshes after every one minute. Let's say my dialog box is opened for 5 minutes, then I have to press 5 times the X button to close that dialog box. Any idea why this is happening ?
For opening the dialog box I used the following code:
var dialogOptions = { overflow: 'scroll',height: 100,width: 500,show: true, hide: true, modal: true};
$('#act_summary').dialog(dialogOptions);
Thanks.

You need to check if that dialog exists first:
if (!$('#act_summary').length > 0){
$('#act_summary').dialog(dialogOptions);
}
If you don't you'll just keep creating new ones. This is why it appears that you have to click it 5 times. You're actually closing 5 instances of the dialog.

Related

Capture any prompt event with javascript?

From MDN:
Dialog boxes are modal windows — they prevent the user from accessing
the rest of the program's interface until the dialog box is closed.
I tried to capture the event when a dialog box appear on the screen using window.confirm
but it seems it doesn't exist on the window level.
My question:
Is there any way to mimic the click when a dialog box appears on screen?
The above code listen and print all the events made on the page, but when I click on the button nothing printed, and when I click "ok" or "cancel" it print "FocusEvent" - I guess that this is the focus on the clicked button.
document.querySelectorAll('button')[0].addEventListener('click', function(){
window.confirm('confirmation box','click');
});
for (var key in window) {
if (key.search('on') === 0) {
document.querySelectorAll('ol')[0].innerHTML += '<li>'+key.slice(2)+'</li>';
window.addEventListener(key.slice(2), function() {
document.querySelectorAll('ol')[1].innerHTML += '<li>'+key.slice(2)+'-'+this.event+'</li>';
document.querySelectorAll('ol')[1].scrollTop = document.querySelectorAll('ol')[1].scrollHeight;
});
};
};
<button>open dialog</button>
<ol style="display: none;"></ol>
<ol style="height: 200px; overflow-y: scroll"></ol>
This confirm box seems on higher level from the window(??)
I did search a lot online but the best (and only) clues lead to 404 pages:
DOMWillOpenModalDialog
DOMModalDialogClosed
Is it possible?

Creating a popup box that pops ip after 3 seconds

I want to make a popup box, that when a user accesses this site: http://www.isicar.net/ it pops up after 2 seconds. So, no clicking of any buttons invoiced to make the popup box appear
The popup box would act as a n advertisement, for users to sign up via this website: http://isicar.mine.nu/ so it would have to contain a button that redirects them to that URL and one that closes the popup box so they can return to the original page.
Thanks in advance.
Use this in ready or DOMContentLoaded or load callback:
Use setTimeout:
Calls a function or executes a code snippet after a specified delay.
setTimeout(function () {
// Open the popup
}, 2000); // 2 seconds

PHP Calculator - Show results on page and in Ajax Popup

UPDATE - this was solved by adding $('.popup-with-form').magnificPopup('open'); to the StateChanged function in the JS. Thanks to #Bollis.
Original Question:
I have a simple calculator here: http://www.roofingcalculator.org/popup/popup.htm
when click on "Calculate" button, i need results to be displayed on that page AND initiate Ajax Popup (Magnific inline) with results displayed in popup as well.
Question: How do i make it so that pressing "calculate" button would both of these at the same time:
1) display results on page
2) Launch pupup with results of calculator
Right now, to show Popup, user needs to click on the link "Open Form".
If you open popup AND don't click "calculte" button, no results are displayed.
If you click Calculate first and then open popup, results are shown on both the page and in popup (see image).
The two things that initiate popup are:
<a class="popup-with-form" href="#test-form">
If i add class="popup-with-form" and href="#test-form" to the Calculate button, it launches popup, but no calculation is done.
All codes for calculator (JS / PHP) can be seen here.
Here is AJAX code that opens popup (i think)
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});
Try adding onsubmit="openPopupFunctionHere()" to your form tag. The onsubmit event will be triggered whenever the form should submit, which happens when you press the "Calculate" button.

Modal window overlay persists after closing Lightbox

I have a main page that has a popup (please see window number 1 in the image I added). In this popup, there is a button of skip. if the user presses skip button, the popup is gone (and then, the user sees the main page) (window number 3). but if the user doesn't press on the popup, but the main window, the color of the main window becomes to a gray color (window number 2). if I press the main window about 3 times, then the color will be changed into a white color (window number 3).
I think I have to hide my popup if the user presses the main window instead of the popup.
how can I fix it?
my popup is called: class="popup_window". the X and the SKIP buttons are called: btn_x and btn_skip.
any help appreciated!
UPDATE this is my welcome_msg java script code:
// welcome message
$("#welcome_dialog").lightbox_me({
centered: true,
onLoad: function() {
//alert("Page is loaded");
}
});
I've just looked at the lightbox_me plugin website and on the homepage it lists the possible options you can use. You need to add the following to your code: "closeClick : true".
So the code you posted above would look like this:
$("#welcome_dialog").lightbox_me({
centered: true,
closeClick: true,
onLoad: function() {
//alert("Page is loaded");
}
});
As described on the site:
CloseClick true Whether or not to close the lightbox with the user clicks the overlay.
Source: http://buckwilson.me/lightboxme/

Call javascript during modalpopup.show()

I have a javascript that disables a button for x seconds and then enables the button after x seconds pass. An update button checks for certain constraints, and if met, a modal popup is shown. The button the javascript is meant for is located in a panel displayed by this modal popup. Is there a way I can execute the javascript when the modal popup / panel is shown?
You can use the following approach if you want to run JavaScript code when a modal popup is showing:
$find("myModalPopupExtender").add_showing(function() {
alert("Modal popup will be shown.");
});
The alert will be shown each time the modal popup extender shows the popup.

Categories