We Keep Coding

How to delay background to show after the popup appear and disappear

I want the popup to show once the page is load. I have made the popup everything working fine I but there is one issue page shows just for a split second before the popup. I want the popup to load first without showing the page.
This is the link of the page http://test2429d.vinnugrunnur.is/home popup has video which runs for 7 second and disappear.

Looking at your sample site, you will have to hide the content and unhide it when you hide the popup.
The reason being your popup is dynamically being added using Javascript. So the popup won't get shown until the page is completely loaded.
There are several ways to do this. If this popup is only limited to this page, you can perhaps use the body class as a reference to hide your .jupiterx-site.
body.elementor-page-10 .jupiterx-site {
display: none;
}
And your Javascript should unhide it after 7 seconds
jQuery(document).ready(function(){
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
jQuery('.eael-lightbox-popup-window').fadeOut('slow');
jQuery('.jupiterx-site').show();
}, 7000);
});

addthis share button not working when I open the modal twice

I'm using addthis share button in my website, but the click of the button is in a modal that is loaded dynamically, so when the modal html is loaded, I call the script of addthis this way:
var addthisScript = document.createElement('script');
addthisScript.id = 'addthisscript';
addthisScript.setAttribute('src',
'//s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript);
So, when I open the modal at first time, it works!
But, if I close the modal and open again and click the button to share again, it just reload the page.
After reloaded the page, starts to work again, but just once.
I already try remove the script from DOM and create again, but still doesn't work!!
When the modal is closed, I remove the entire HTML, this way:
$(`#${id_modal}`).on("hidden.bs.modal",() => {
$(`#${id_modal}`).remove();
}
And every time that I open the modal, I call the function addthis() that create the script above.
Any help?

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.

How to handle when the x button is click on pop-up web page using Javascript?

I have a “pop-up” web page inherits from System.Web.UI.Page in a plug-in which is a part of a large web framework. The markup is inside <asp:Content> below. I need to perform some actions (updating the page behind) when the user clicks on “Close” button (id = _close) and when the user clicks on the ‘x’ button on the right corner of the page. My page is not displayed in the browser. I got the “onclick” (in the code behind) to work for “Close” button below, but I don’t know how to detect when the ‘x’ button is clicked. I tried on window.beforeunload and window.onclose, it doesn’t work. “Hello World” pops up when my web page opens and when I click “Close” (_close) button.
How do I handle for the click on the ‘x’ the same way when “_close” button is clicked?
<script language="javascript">
function doClose() { alert('Hello World!'); } window.onload = doClose(); // also tried with window.beforeunload </script>

You can execute the code on the opener. Write a method in opener and execute it from the pop-up window.
http://www.w3schools.com/jsref/prop_win_opener.asp