I want to have a pop-up modal appear on the new requests page. I have it working as I want with the below code. The problem I'm having is: When the page opens it pops up (good). But when the form (we have multiple) is chosen it pops up again (not good).

One or the other is ok, preferably the latter - after they select the form. Just need it to show once. Any help is appreciated. I am not a coder so if you have solution please treat me as a simpleton. Thanks!

<!DOCTYPE html>

<html>

<head>

<style>

#dialogoverlay{

display: none;

opacity: .8;

position: fixed;

top: 0px;

left: 0px;

background: #FFF;

width: 100%;

z-index: 10;

}

#dialogbox{

display: none;

position: fixed;

background: #000;

border-radius:7px;

width:550px;

z-index: 10;

}

#dialogbox > div{ background:#FFF; margin:8px; }

#dialogbox > div > #dialogboxhead{ background: #FFFF00; font-size:19px; padding:10px; color:#FF0040; }

#dialogbox > div > #dialogboxbody{ background:#000; padding:20px; color:#fff; }

#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }

</style>

function CustomAlert(){

this.render = function(dialog){

var winW = window.innerWidth;

var winH = window.innerHeight;

var dialogoverlay = document.getElementById('dialogoverlay');

var dialogbox = document.getElementById('dialogbox');

dialogoverlay.style.display = "block";

dialogoverlay.style.height = winH+"px";

dialogbox.style.left = (winW/2) - (550 * .5)+"px";

dialogbox.style.top = "100px";

dialogbox.style.display = "block";

document.getElementById('dialogboxhead').innerHTML = "NOTICE - please read!";

document.getElementById('dialogboxbody').innerHTML = dialog;

document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>';

}

this.ok = function(){

document.getElementById('dialogbox').style.display = "none";

document.getElementById('dialogoverlay').style.display = "none";

}

}

var Alert = new CustomAlert();

</script>

</head>

<div>

</div>

</div>

</body>

</html>