我們可以在不使用警報或windows.alert的情況下彈出窗口嗎

Question

理想情況下，當我單擊表中的一個操作項時，單擊它會顯示“顯示消息”，我需要一個不使用window.alert或alert的彈出窗口，而是根據我的網站設計顯示一個彈出窗口

function showFailedWarning(){
    dijit.byId('validationsForm').clearMessages();
    dijit.byId('validationsForm').popup(alert("Upload Correct File "));
}

Answer 1

方法1-純JavaScript

您可以使用任何所需的設計來構建自己的彈出窗口。 可以對HTML中的元素進行硬編碼並在CSS中將display:none設置為容器，或者動態附加容器。

注意： 為什么我使用innerHTML代替appendChild() 。

現場演示

的HTML

<button id="error">Click for error</button>

的JavaScript

document.getElementById('error').onclick = function (event) {
    event.preventDefault();

    /*Creating and appending the element */

    var element = '<div id="overlay" style="opacity:0"><div id="container">';
    element += "<h1>Title</h1><p>Message</p>";
    element += "</div></div>";
    document.body.innerHTML += (element);
    document.getElementById('overlay').style.display = "block";

    /* FadeIn animation, just for the sake of it */
    var fadeIn = setInterval(function () {
        if (document.getElementById('overlay').style.opacity > 0.98) clearInterval(fadeIn);
        var overlay = document.getElementById('overlay');
        overlay.style.opacity = parseFloat(overlay.style.opacity, 10) + 0.05;
        console.log(parseFloat(overlay.style.opacity, 10));

    }, 50);
};

的CSS

#overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color: rgba(0, 0, 0, 0.5);
    opacity:0;
    display:none;
}
#container {
    position:absolute;
    top:30%;
    left:50%;
    margin-left:-200px;
    width: 400px;
    height:250px;
    background-color:#111;
    padding:5px;
    border-radius:4px;
    color:#FFF;
}

---

---

---

方法2-第三方庫

您可以使用jQuery UI庫來實現所需的功能：

現場演示

的HTML

<button id="error">Click for error</button>

JavaScript / jQuery

$('#error').click(function (event) {
    event.preventDefault();
    $('<div id="container"><h1>Error</h1><p>Message</p></div>').dialog({
        title: "Error"
    });
});

Answer 2

由於您這個問題帶有dojo標記，並且示例中包含dijit代碼，因此建議您使用dijit.Dialog來執行此操作。

我在jsfiddle上放了一個簡短的示例來演示它 。

require(['dijit/Dialog', 'dijit/form/Button'], function (Dialog, Button) {
    //create a new button (doesn't matter if it is programmatically or not)
    var button = new Button({
        label: 'Validate',
        type: 'button'
    });
    button.placeAt(dojo.body());
    button.on('click', function () {
        //instantiate the dialog with our error message and content
        var dialog = new Dialog({
            title:'Error Message title',
            content: '<div>Something is invalid!</div>',
            style:'min-width:300px;'
        });
        //show the error message
        dialog.show();
    });


});

dijit / Dialog的dojo文檔也應該對您有所幫助。