최근 검색
최근 검색 없음
Guide (Help Center) coding genius assistance needed!
답변함
2022년 7월 31일에 게시됨
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>
<meta charset="UTF-8">
<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>
<script>
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>
<body onload="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.)')">
<div id="dialogoverlay"></div>
<div id="dialogbox">
<div>
<div id="dialogboxhead"></div>
<div id="dialogboxbody"></div>
<div id="dialogboxfoot"></div>
</div>
</div>
</body>
</html>
0
4
댓글 4개
Ifra Saqlain
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:
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');
}
}
It's working for me as you want. If any issue let me know :)
Thanks
Team
0
Budke, John
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.
0
Budke, John
I figured out the screen positioning. Thanks again for your help, everything great now.
0
Ifra Saqlain
Glad to hear that it's working for you :)
0