Properly Run Pop Up-Javascript in WordPress

Sorry, it is actually loaded..hmm

I got it. You also need to put jquery-ui-dialog into the dependency array. Try it and let me know. You can find all registered scripts in wp-includes/script-loader.php, starting from the line 50.

WOW! That was it! I wonder how it’s included in the admin area, but not anywhere else. Maybe some plugin loads it in wp-admin?

Thanks you for your help so far. That was such an interesting case.

Now, I just need to find the right place to nestle the html code.
I tried putting it in index.php right after get_header(), but the console
gives a JS error on line 63: Uncaught TypeError: Cannot read property ‘style’ of null

blanket.style.height = blanket_height + 'px';

I pasted the html between a closed and open php tag in Index.php

<?php get_header(); ?>

and

<?php ...

Yeah, probably admin bar includes it by default (used by some Admin Dashboard facilities).

Nesting the code depends on your needs and use cases. I usually prefer stronger and more organized theme structure so .js files would end up in /js/ folder for example. And for the HTML code, is it a static HTML block? Does it need to be included on all pages or just the index one?

You could separate that html into a standalone .php file and create a new function in your functions.php file to include that php file. Add it into wp footer action for example:

function perpetual_design_render_popup_html() {
    include 'my-custom-popup.php;
}

add_action( 'wp_footer', 'perpetual_design_popup_html');

and it will be triggered when the wp_footer() function is called (should be in the footer.php)

Or even better, you could wrap it in a shortcode and call that shortcode on the page that is being assigned as the static front page (if it is). This way, any time you need to use that popup, just include the shortcode in a post/page.

<form id="ccsfg" name="ccsfg" method="post" action="/ctct/signup/index.php">

<h4>Registration Form</h4><p style="display:none">Fill out below:</p>
<div style="margin-left: 100px;"><img src="http:\\www.lakenormansocialclub.com/ctct/Logo.png" style="width: 60%;"></div>
<div id="CCFrame">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tbody>
<!-- ########## Email Address ########## -->
<tr><td valign="top" align="right"><label class="CCFormLabel" for="EmailAddress">Email Address</label></td>
<td align="left"><input class="CCFormInput" type="text" name="EmailAddress" value="" id="EmailAddress" /></td></tr>
<!-- ########## First Name ########## -->
<tr><td valign="top" align="right"><label class="CCFormLabel" for="FirstName">First Name</label></td>
<td align="left"><input class="CCFormInput" type="text" name="FirstName" value="" id="FirstName" /><br /></td></tr>
<!-- ########## Last Name ########## -->
<tr><td valign="top" align="right"><label class="CCFormLabel" for="LastName">Last Name</label></td>
<td align="left"><input class="CCFormInput" type="text" name="LastName" value="" id="LastName" /><br /></td></tr>
<!-- ########## Contact Lists ########## -->
<tr><td valign="top" align="right"><p class="CCFormLabel">Your areas of interest</p></td>
<td align="left"><input type="checkbox"  checked="checked"  value="General Interest" name="Lists[]" id="list_General Interest" />
<label for="list_General Interest">General Interest</label></td></tr>
</tbody></table>
<input type="submit" name="signup" id="signup" value="Subscribe" />
</div>

</form>

<div class="ui-widget-overlay" id="blanket" style="display:none;" onclick="toggle('blanket'), toggle('popUpDiv')"></div>
<div id="popUpDiv" class="ui-dialog ui-widget ui-widget-content ui-corner-all" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-ccsfg" style="display:none; z-index:1000; width:350px;">

		<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-ccsfg" unselectable="on">Sign Up?</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" onclick="popup('popUpDiv')"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div>
        </br>
		<div style="margin-left: 100px;"><img src="http:\\www.lakenormansocialclub.com/ctct/Logo.png" style="width: 60%;"></div>
		<p style="text-align:center">Want to hear about the latest events? Sign up here! </p>
		<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><a href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="popup('popUpDiv'), jQuery('#ccsfg').dialog( 'open' )" id="ccsfg_btn">Sign Me Up</a></div></div>

</div>

It is static html. Index.php is fine, but I only really need it on the home page.

Is it possible to put it in .php when it’s not really php code? Am I missing something simple, like a giant echo block?

If it is just a static block of html code, no need to put it inside a .php file. Just include an html file, like:

<?php
[...]

include 'my-custom-popup.html';

As for where to include it, you are free to put it anywhere within <body></body> tags. If <body> starts in header.php, then you can include it after wp_head() call in your index.php

Hmm. I added

`
function perpetual_design_render_popup_html() {
include (ABSPATH . “form.html”);
}

add_action( ‘wp_footer’, ‘perpetual_design_popup_html’);
‘

But it doesn’t seem to load at all. The static html is in a file called form.html in the root of where wordpress is installed; for example with wp-config.php and such.

Firstly, I do not recommend putting anything in the main WP directory, definitely not some custom html files. They are made by you so either put them inside a theme or a plugin.

That being said, you have a small typo in your add_action code. The function is called perpetual_design_render_popup_html, not perpetual_design_popup_html.

Okay, I put it in a proper directory and it loads in the footer!

I had an error related to the no conflict mode you mentioned earlier with jquery but I fixed that by changing

jQuery(document).ready(function(){

jQuery(document).ready(function($){

So a piece of the code

$.get(_action, json,

would work in the local scope.

So all code works and loads, however the second popup elements come up funny and slightly misplaced while the first pop up is fine. All JS elements work, including closing the popup and the .PHP based submission and the first blank overlay, but the second set of elements display wonkily.

Why do you suppose that is?

And again, thanks for all your help. I learned quite a lot.

I had some CSS issues from overriding styles of the WordPress theme (because more specific CSS overrides less specific) and issues of the popup-order, which I am fixed with Z-index.

I have a few other issues, CSS related, but my matter is basically resolved.

The solution for me was:

• properly enqueueing my scripts in the right place
• calling the proper dependencies on enqueueing
• being aware of jquery’s No Conflict Mode
• using a custom function to load static html where I want it
• being aware of CSS properties and hiearchy

Thanks for everyone involved in this thread for the help!

Thanks for the nice write-up. I hope this thread will be helpful for future WP newcomers. ??

Rasto