Question

我想制作一个返回true或false的确认符。如果用户单击“确定”，则必须返回true，如果用户单击“取消”或左上角的十字形，则必须返回false。但我已经停留在用户点击按钮的位置。我已经尝试过使用回调，但它无法帮助我实现我想拥有的功能。

到目前为止，我有这个：

function SimpleAlert( title, text, cancel)
{
    var stylesheet = document.createElement('style');
    stylesheet.id="SimpleAlertStylesheet";
    stylesheet.innerHTML="#SimpleAlertOverlay { top:0px; bottom:0px; left:0px; right:0px; position:fixed; background:rgba(230,230,230,0.5); height:100%; width:100%; font-family:Sans-serif; } #SimpleAlertLightbox { background:#f5f5f5; border-radius:3px; width:400px; box-shadow: 0px 0px 15px rgba(0,0,0,0.3); } .SimpleAlertTopbar { border-radius:3px; background:#e5e5e5; height:24px; color:#444; line-height:24px; padding:0px 5px; font-weight:bold; font-size:14px; border-bottom:1px solid #DDD } .SimpleAlertCross1 { margin:5px 15px 0px 0px; opacity:0.7; } .SimpleAlertCross2 { margin:5px 15px 0px 0px; opacity:0.5; } .SimpleAlertCross1:hover { opacity:1; } .SimpleAlertTopbar > div { float:left } .SimpleAlertMessagediv { padding:20px 40px; font-size:14px; color:#444; } .SimpleAlertButtondiv { height:26px; line-height:26px; padding:0px 40px 18px 40px; } .SimpleAlertButtondiv button { height:26px; background:#f9f9f9; border:1px solid #CCC; color:#444; float:right; } .SimpleAlertButtondiv button:hover { border:1px solid #AAA; } .SimpleAlertButtondiv button:focus { outline:none; }";

    var overlay = document.createElement('div');
    overlay.id = 'SimpleAlertOverlay';
    var lightbox = document.createElement('div');
    lightbox.id = 'SimpleAlertLightbox';
    overlay.appendChild(lightbox);
    var topbar = document.createElement('div');
    topbar.setAttribute("class", "SimpleAlertTopbar");
    lightbox.appendChild(topbar);
    var crossdiv = document.createElement('div');
    topbar.appendChild(crossdiv);
    var crossspan = document.createElement('span');
    crossdiv.appendChild(crossspan);
    var cross = document.createElement('img');

    if(cancel)
    {
        cross.setAttribute("class", "SimpleAlertCross1");
    }
    else
    {
        cross.setAttribute("class", "SimpleAlertCross2");
    }

    cross.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDBGMDEwRUNCQTQyMTFFMzlBNjZDNzQ4QzkxQTI1QkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDBGMDEwRURCQTQyMTFFMzlBNjZDNzQ4QzkxQTI1QkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MEYwMTBFQUJBNDIxMUUzOUE2NkM3NDhDOTFBMjVCRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MEYwMTBFQkJBNDIxMUUzOUE2NkM3NDhDOTFBMjVCRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp1kTM8AAAFGSURBVHjalJI9S0JRGMd/VwKnbKkQvOpUBqIOOrj4DTTEanKqzSGQvknt9gXiIgp+BScXdZEKB18GockGscHTc7zdazcs8g+/w3l5nvM/L4+hlMJVKnUo7Z2QF06/ZgdCU3ig231zQg03MZm8kLYmHLBdc+GGXs/aJCYSOulJj/lb2uWKft8yVDx+JINXIcD/pJ1PfKxWt0JAYE2pBJWK3c9moVqFYBB33Y6t+lDqHH1ch3YbTBPKZSgUYDaD6RRPjFJ57Xj2bTcYj6HTgXQalktoNPCs28T21p2fWiw2fSfYqw/tOPDsFgpBLme7+v1QLG5zHOrEpmdS320uD1eTL63XIZOxj+1NbBkqGj0W65ddv8MugEhktwIYjaxNyYXDl9I+Cvu/JL0L1/LqlrdWtUzTKXL5QGL69YRnoSXcM5m4Rf4pwABHDba2DxAS7QAAAABJRU5ErkJggg==';
    crossspan.appendChild(cross);
    var titlediv = document.createElement('div');
    titlediv.innerHTML = title;
    topbar.appendChild(titlediv);
    var messagediv = document.createElement('div');
    messagediv.setAttribute("class", "SimpleAlertMessagediv");
    messagediv.innerHTML = text;
    lightbox.appendChild(messagediv);
    var buttondiv = document.createElement('div');
    buttondiv.setAttribute("class", "SimpleAlertButtondiv");
    lightbox.appendChild(buttondiv);
    var okbutton = document.createElement('button');
    okbutton.innerHTML="OK";
    buttondiv.appendChild(okbutton);
    document.body.appendChild(overlay);
    document.body.appendChild(stylesheet);

    Element.prototype.remove = function() {
        this.parentElement.removeChild(this);
    }

    function CenterDiv(elementId){
         var main = document.getElementById(elementId);
         var wi=main.offsetWidth;
         var he=main.offsetHeight;
         var marginleft = wi / 2;
         var margintop = he / 2;
         main.style.marginLeft="-" + marginleft;
         main.style.marginTop="-" + margintop;
         main.style.position="absolute";
         main.style.left="50%";
         main.style.top="50%"
        }
        CenterDiv('SimpleAlertLightbox');

        if(cancel)
        {
            var cancelbutton = document.createElement('button');
            cancelbutton.innerHTML="Cancel";
            cancelbutton.style.marginRight="30px";
            buttondiv.appendChild(cancelbutton);
            cancelbutton.addEventListener('click', SimpleAlertCancel , false);
        }
        cross.addEventListener('click', SimpleAlertCancel , false);
        okbutton.addEventListener('click', SimpleAlertOK , false);

        function SimpleAlertCancel()
        {
            document.body.removeChild(document.getElementById('SimpleAlertOverlay'));
            document.body.removeChild(document.getElementById('SimpleAlertStylesheet'));
        }
        function SimpleAlertOK()
        {
            document.body.removeChild(document.getElementById('SimpleAlertOverlay'));
            document.body.removeChild(document.getElementById('SimpleAlertStylesheet'));
        }
}

我想要实现的目标是：

if(SimpleAlert('title', 'text', true))
{
  //User clicked OK
}
else
{
  //User clicked Cancel
}

我正在寻找类似系统功能的东西：alert（），confirm（）和prompt（）。这些函数会暂停所有Javascript，并等待单击按钮。

我浏览了计算机上安装的互联网浏览器的所有文件夹，以查找声明的上述功能但我无法找到它们。

以下是没有打开小提琴的人的警告框图像; - ）

enter image description here

我希望你能帮我走近一步。

Answer 1

你不能用Javascript做，因为它是异步的，即使显示窗口/ div，代码也会继续执行。

要管理操作，请在每个“确定”和“取消”按钮上的 onclick 事件中执行所需的代码

自定义确认框，等待按钮单击功能Javascript

1 个答案: