0

理想的には、テーブルのアクション項目をクリックすると、クリックすると「メッセージを表示」が表示されます。window.alert または alert を使用せずにポップアップが必要です。

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

2 に答える 2

6

方法 #1 - 純粋な JavaScript

好きなデザインで独自のポップアップを作成できます。HTML の要素をハードコードして CSS のコンテナーに設定するかdisplay:none、コンテナーを動的に追加します。

注: の代わりに使用した理由innerHTMLappendChild()。

ライブデモ

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"
    });
});
于 2013-07-23T18:55:27.797 に答える