Popup

Brian Miller 2

I am attempting to add a popup to my donation pages, as a gentle nudge to stay on the monthly giving page. We do pretty well already, but I wanted to make it that they wanted to stay. I have "programmed" a Popup in Page Builder that works great, but when I put it onto a donation the popup closes as fast as it opens. I was thinking that it might be because there are multiple calls, but I can't see an original set in the page wrapper that might interfere on this modal I'm creating. Any help would be appreciated, this is actually just outside my ability, but I'm attempting to fake it, just okay.


Here is my test page builder that is working: https://secure2.convio.net/nlmed/site/SpageNavigator/NLM_Test_Progress.html 

Here is my test donation page that is failing: https://secure2.convio.net/nlmed/site/Donation2?df_id=2543&mfc_pref=T&2543.donation=form1 


And for kicks, here is my code:


<p>

<meta name="viewport" content="width=device-width, initial-scale=1" />

</p>

<style type="text/css"><!--

body {font-family: Arial, Helvetica, sans-serif;}


/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}


/* Modal Content */

.modal-content {

    background-color: #fefefe;

    margin: auto;

    padding: 20px;

    border: 1px solid #888;

    width: 80%;

}


/* The Close Button */

.close {

    color: #aaaaaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

}


.close:hover,

.close:focus {

    color: #000;

    text-decoration: none;

    cursor: pointer;

}

--></style>

<h2>Give Hope a Chance</h2>

<!-- Trigger/Open The Modal -->

<p>

<button id="myBtn">

<p style="text-align: left;"><span style="color: #000000; font-family: century gothic, verdana, arial, helvetica, sans-serif; font-size: 120%;">Make One-Time</span></p>

</button></p>

<!-- The Modal -->

<div id="myModal" class="modal">

  <!-- Modal content -->

<div class="modal-content">

    <span class="close">&times;</span>

<p><strong>Before we move on to making a one-time gift, would you consider something?</strong></p>

<p>You can give less today and have a greater impact. Become a friend of New Life Media by converting your gift into an ongoing monthly gift.</p>

<p>By joining the Friends of New Life Media program, you are becoming a part of an exclusive group of people committed to sharing the Gospel of Jesus Christ by defending Faith, HOPE, and Family.</p>

<p>For those that are already a monthly donor, thank you! For everyone else, if you make your gift an ongoing monthly gift, you will offer consistent help to families who need biblical truth most.</p>

<p><strong>Would you like to continue to make your gift an ongoing monthly gift?</strong>

</p>

<p style="text-align: left;"><span style="font-size: 180%;"><span style="color: #97ca4c; font-family: &quot;century gothic&quot;, verdana, arial, helvetica, sans-serif;"><a href="Donation2?df_id=2662&amp;mfc_pref=T&amp;2662.donation=form1"><img src="../images/content/pagebuilder/Button-monthly.png" border="0" alt="Monthly Button" width="150" height="50" /></a><span style="white-space: pre;">    <a href="Donation2?df_id=2667&amp;mfc_pref=T&amp;2667.donation=form1"><img src="../images/content/pagebuilder/unButton-onetime.png" border="0" alt="Onetime Unbutton" width="150" height="50" /></a></span></span></span></p>

<p>&nbsp;</p>

</div>

</div>

<script type="text/javascript">// <![CDATA[

// Get the modal

var modal = document.getElementById('myModal');


// Get the button that opens the modal

var btn = document.getElementById("myBtn");


// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];


// When the user clicks the button, open the modal 

btn.onclick = function() {

    modal.style.display = "block";

}


// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}


// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "none";

    }

}

// ]]></script>

<p style="text-align: left;"><span style="color: #000000; font-family: century gothic, verdana, arial, helvetica, sans-serif; font-size: 120%;">To make a One-Time gift, click the box above</span></p>

<p>

Brian Mucha

Your stand along example link is broken, but the form link works.


I put a couple of breakpoints in your script. (Are you watching the script run in your DevTools debugger?)


// When the user clicks the button, open the modal 

btn.onclick = function() {
X    modal.style.display = "block";

}


// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}


// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {
X  if (event.target == modal) {

        modal.style.display = "none";

    }

}


The btn.onclick event runs, and then right after that your window.onclick runs. Makes sense, if you click the button you must be clicking the window. 


I would change window.onclick to modal.onclick, so clicks on the background trigger the close. 


Otherwise you could try to add event.stopPropagation() to the end of your btn.onclick function. 


BPM