Guide (Help Center) coding genius assistance needed!

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>

</body>

</html>

if (window.location.href.indexOf("requests/new") > -1) {
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";
}
}
}

if (window.location.href.indexOf("?ticket_form_id") < 1) {
var Alert = new CustomAlert();
window.onload = function() {
Alert.render('If the request you want to submit is not listed as an option please contact a supervisor for triage and action. Additional reporting channels are available to them. (Examples include MDT, OA, intra/internet, console furniture, etc.)')
};
}else{
console.log('Disable function');
}
}

Ifra Saqlain

2. August 2022 04:43
Bearbeitet

Community Moderator

Hey Budke, John,

Try the given code, hope it worked for you.

I tried it on Copenhagen Theme.

i). new_request_page.hbs, remove 'onload' event from the body tag.

ii). style.css file, same code as you have.

iii). script.js file, you need to use the code below which I shared.

Code:

It's working for me as you want. If any issue let me know :)

Thanks

Team

Budke, John

3. August 2022 20:21

Hi Ifra: THANK YOU! Works perfectly! One question, if I may...how do I change the box position? It's at the very top immediately below the header. I'd like to move it down to be more readable.

4. August 2022 00:19

I figured out the screen positioning. Thanks again for your help, everything great now.

4. August 2022 04:37

Glad to hear that it's working for you :)

Guide (Help Center) coding genius assistance needed!

4 Kommentare

Sie haben nicht gefunden, wonach Sie suchten?