如何关闭JavaScript中的自定义提示框？

Question

I'm trying to make a custom prompt box in javascript. 我正在尝试在javascript中创建自定义提示框。 However, I just can't figure out how to close it again. 但是，我只是想不出如何再次关闭它。 The cancel button does work (the prompt box disappears), but when you click on the ok button, the box doesn't disappear. 取消按钮确实起作用（提示框消失），但是当您单击确定按钮时，该框不会消失。

Since I based my code on the code on this page: https://www.developphp.com/video/JavaScript/Custom-Prompt-Box-Programming-Tutorial 由于我的代码基于此页上的代码： https : //www.developphp.com/video/JavaScript/Custom-Prompt-Box-Programming-Tutorial

But now I see that if I copy the example on that page, the OK button doesn't work either. 但是现在我看到，如果我在该页面上复制示例，则“确定”按钮也不起作用。 Can someone tell me what's wrong? 有人可以告诉我怎么了吗？

This is the example on the site I linked to, which doesn't work: 这是我链接到的网站上的示例，该示例不起作用：

<!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: #666; font-size:19px; padding:10px; color:#CCC; }
#dialogbox > div > #dialogboxbody{ background:#333; padding:20px; color:#FFF; }
#dialogbox > div > #dialogboxfoot{ background: #666; padding:10px; text-align:right; }
</style>
<script>

function changeText(val){
    document.getElementById('status').innerHTML = val;
}
function doStuff(val){
    document.body.style.background = val;
}
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 = "Acknowledge This Message";
        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();
function CustomConfirm(){
    this.render = function(dialog,op,id){
        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 = "Confirm that action";
        document.getElementById('dialogboxbody').innerHTML = dialog;
        document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes(\''+op+'\',\''+id+'\')">Yes</button> <button onclick="Confirm.no()">No</button>';
    }
    this.no = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
    this.yes = function(op,id){
        if(op == "delete_post"){
            deletePost(id);
        }
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
}
var Confirm = new CustomConfirm();
function CustomPrompt(){
    this.render = function(dialog,func){
        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 = "A value is required";
        document.getElementById('dialogboxbody').innerHTML = dialog;
        document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1">';
        document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>';
    }
    this.cancel = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
    this.ok = function(func){
        var prompt_value1 = document.getElementById('prompt_value1').value;
        window[func](prompt_value1);
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
}
var Prompt = new CustomPrompt();
</script>
</head>
<body>
<div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<h1>My web document content ...</h1>
<h2>My web document content ...</h2>
<button onclick="alert('You look very pretty today.')">Default Alert</button>
<button onclick="Alert.render('You look very pretty today.')">Custom Alert</button>
<button onclick="Prompt.render('And you also smell very nice.')">Custom Alert 2</button>
<h3>My web document content ...</h3>
</body>
</html>

Answer 1

You're missing the second parameter for the ok button click, which allows you to invoke a function once you click ok: 您缺少“ ok按钮单击的第二个参数，单击该参数可以在单击“ ok调用一个函数：

<button onclick="Prompt.render('And you also smell very nice.', 'doStuff')">Custom Alert 2</button>

This will invoke doStuff with the value from the prompt. 这将使用提示中的值调用doStuff 。

Answer 2

There is one possibility check with the id's used for elements in you the code provided if at all there are duplicate id the javaScript will not work properly. 如果您提供的代码中有用于所有元素的ID，则存在一种可能的检查，如果根本没有重复的ID，则JavaScript将无法正常工作。

This statement in the code, 该语句在代码中，

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

Is making use of element with id 'dialogbox' so if at all there is another element in your page having same id. 正在使用ID为“ dialogbox”的元素，因此，如果页面中根本没有另一个具有相同ID的元素。 your code will not work properly. 您的代码将无法正常工作。 More help can be provided if there is code with problem is shared. 如果共享有问题的代码，则可以提供更多帮助。

如何关闭JavaScript中的自定义提示框？

问题描述

2 个解决方案

解决方案1
1 2015-03-22 09:14:20

解决方案2
0 2015-03-22 08:58:31

如何关闭JavaScript中的自定义提示框？

问题描述

2 个解决方案

解决方案1 1 2015-03-22 09:14:20

解决方案2 0 2015-03-22 08:58:31

解决方案1
1 2015-03-22 09:14:20

解决方案2
0 2015-03-22 08:58:31