i have set up a revolution slider in my home page in a wordpress site.
I decided to add some Newsletter popup window that shows only the first time the user arrives to the page using the advise from here
The code i use to display the pop window using cookies is working fine in all web pages but fails with the home page that runs the revolution slider.
I tried to debug and found out that if i delete the part of the code that calls the mailchimp embed code then the revolution slider works.
So what should i do? the code i am using to create the popup using cookies is:

<!DOCTYPE html>
<html lang="en">
<head>
 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" ></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" ></script>

</head>
    <script>
      jQuery(document).ready(function () {
if (jQuery.cookie('whenToShowDialog') == null) {
            // Create expiring cookie, 2 days from now:
            jQuery.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });
            // Show dialog
                setTimeout(function () {
                    jQuery("#myModal").modal('show');
                },60000);
}
if(jQuery('#mc-embedded-subscribe').val()!==0)
{
	jQuery('.button').click(function(){
jQuery("#myModal").modal('hide');
});
}
        });
</script>

then it is plain html that creates the pop window

<body>

<div class="container">
  <!-- Trigger the modal with a button -->
  <!-- <button type="button" class="btn btn-info btn-lg" id="sample">Open Modal</button> -->

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div style="-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);box-shadow: -10px 9px 0px #6ab2b1;border: 3px solid black;border-radius: 0px;" class="modal-content" >
        <div class="modal-header" style="border-bottom:none;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
<p class="my-popup-par" style="text-align: center; text-align: center;    font-size: 2rem;    color: black!important;    line-height: 20px;font-weight:bold;">blah blah</p>
<p class="my-popup-par" style="text-align: center; text-align: center;    font-size: 2rem;    color: black!important;    line-height: 20px;font-weight:bold;">blah blah</p>
<p class="my-popup-par" style="text-align: center; text-align: center;    font-size: 2rem;    color: black!important;    line-height: 20px;font-weight:bold;">blah blah</p><br>
<p class="my-popup-par" style="text-align: center; text-align: center;    font-size: 1.7rem;    color: black!important;line-height: 10px;">blah blah</p>
<p class="my-popup-par" style="text-align: center; text-align: center;    font-size: 1.7rem;    color: black!important;line-height: 10px;">blah blah</p>
        </div>

and the final part of the code calls mailchimp

	<div class="my-popup">

				<div id="mc_embed_signup" class="modal-container"><form action="//mydomain.us14.list-manage.com/subscribe/post?u=fc3d48f92bcecb023e178efb2&amp;id=e29a31bdbc" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
				<div id="mc_embed_signup_scroll">
				<div class="mc-field-group" class="my-mc-field">
				<input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" style="text-align:center;" placeholder="ENTER YOUR EMAIL"/></div>
				<div id="mce-responses" class="clear"></div>
				<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
				<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fc3d48f92bcecb023e178efb2_e29a31bdbc" tabindex="-1" value=""></div>
				<div class="clear" ><input  id="mc-embedded-subscribe" class="button my-inputs" name="subscribe" type="submit" value="SIGN UP" required /></div>
				</div>
				</form></div>
				<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js' async></script><script type='text/javascript' async>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
				<!--End mc_embed_signup-->
				</div>

I have added the async tag but with no success.
I also tried some plugins that implement popup boxes and produced the same issue and then i decided to hardcode everything only to end up in the same problem.
is there a way to overcome this issue?

Read more here: Revolution slider fails to display with mailchimp popup window


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: