Question

我正在构建一个纯粹的javascript警报框脚本，但我仍然停留在用户单击按钮的位置。我正在尝试做的是根据按钮单击生成一个返回true或false的函数。我想用一个生成HTML和CSS的Javascript页面来做这件事。如果你不启动一个新函数，我只知道一种从函数返回值的方法。关键是我需要第二个功能来捕获按钮点击。

我希望你知道一种让函数根据点击的按钮返回一个值的方法。我的Javascript代码如下：

FIDDLE

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 { 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'));
            alert('Cancel');
        }
        function SimpleAlertOK()
        {
            document.body.removeChild(document.getElementById('SimpleAlertOverlay'));
            document.body.removeChild(document.getElementById('SimpleAlertStylesheet'));
            alert('OK');
        }
}

如果不清楚，请在评论中问我。

致Laoujin

我的目标是调用函数并接收真或假：

if(SimpleAlert( title, text, cancel))
{
    //user clicked OK
}
else
{
    //user clicked Cancel
}

已发布的答案开启了新的机会，但也许您已经知道我的代码中缺少部分了？

Answer 1

使用回调的简单示例：

为SimpleAlert提供额外参数：

<button onclick="SimpleAlert('My title', 'The message', true, handleResult)">Start</button>

handleResult函数：

function handleResult(buttonClicked) {
    if (buttonClicked) {
        alert("Ok");
    } else {
        alert("Cancel");
    }
}

更改的确定/取消处理程序：

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

JSFiddle

如评论中所述，代码如下：

if(SimpleAlert( title, text, cancel))
{
    //user clicked OK
}
else
{
    //user clicked Cancel
}

是不可能的，因为SimpleAlert在用户实际按下其中一个按钮之前无法返回值。（实际上可以使用setInterval，但这不是一种值得推荐的方法！）

你可以达到同样的目的：

SimpleAlert(title, text, cancel, function(clickedOk) {
    if (clickedOk) {
        //user clicked OK
    } else {
        //user clicked Cancel
    }
});

完全不同的东西：将尖括号放在新行上并不是JavaScript中的好习惯，因为它可能导致undesired behavior。

检查按钮从功能内部单击

1 个答案: