Combine two scripts in to one

[peterpilp]

I have two simple popup scripts. both are running well. please check both codes I have given below.
Now I need to combine both scripts in to one so that when I click the first pop up, I need the 2nd popup to open, can you show me how can I get this done. cheers.

First popup: https://www.w3schools.com/code/tryit.asp?filename=FOIGOSMDTGCL
Second popup: https://www.w3schools.com/code/tryit.asp?filename=FOIGNN0JHX3S

First popup

[code]

X

CLICK HERE

[/code]

Second popup

[code]

Please enter your details to send the goods

Name:

E-mail:

Comment:

[/code]

[JimL]

You’re using jquery so you could do something like this

First popup. I’ve removed all the inline styling as you should add these to a css file, they are only cluttering up the code making it harder to work with / read.

You normally do not want to use IDs for elements you will have multiple instances of, it will confuse the browsers a lot as ID really means you have 1 unique element on the page with that name.

[code]

CLICK HERE

[/code]

[code]$( “a[data-open-popup” ).click(function(e) {
e.preventDefault(); // we don’t want the browser to handle the event from clicking the link (navigating to /#)

var popupToOpen = $(this).data(‘open-popup’); // will contain “second_popup”
});[/code]

You should be able to go from there.

I must ask though, why not use a library for this? There are a lot of popup/modal libraries available that do this a lot better

[peterpilp]

You’re using jquery so you could do something like this

First popup. I’ve removed all the inline styling as you should add these to a css file, they are only cluttering up the code making it harder to work with / read.

You normally do not want to use IDs for elements you will have multiple instances of, it will confuse the browsers a lot as ID really means you have 1 unique element on the page with that name.

I must ask though, why not use a library for this? There are a lot of popup/modal libraries available that do this a lot better

Hi, Thanks for the reply,
have a look at the below image of the wordpress plugin that I’m using. It simply import nflshop.com ( just an example ) in to a blank WP page and shows a custom popup over it.

http://i.imgur.com/drlDua3.png ( sorry I’m not allowed to add images yet )

I need to enter the script in to the “Custom html” area. ( you can see at the 8th row of the image. ).
when a visitor load the page, the first popup will be shown and once the visitor clicks the first popup, it should be disappeared and the second popup will be shown for the visitor to enter his name/email etc. that’s it.

however I need to get this done in a single script and paste it at “custom html”

I can’t hide the second script until a user click the first script.

any suggestions? can I do this using Show/Hide DIV

Cheers mate,

[peterpilp]

You’re using jquery so you could do something like this

First popup. I’ve removed all the inline styling as you should add these to a css file, they are only cluttering up the code making it harder to work with / read.

You normally do not want to use IDs for elements you will have multiple instances of, it will confuse the browsers a lot as ID really means you have 1 unique element on the page with that name.

You should be able to go from there.

I must ask though, why not use a library for this? There are a lot of popup/modal libraries available that do this a lot better

ok, got it done to a certain extent,

check here, https://www.w3schools.com/code/tryit.asp?filename=FOK7620F9WEI
but still the second popup is hidden…