使用适用于所有浏览器的jQuery或Javascript创建弹出框

时间:2016-06-22 13:54:01

标签: javascript jquery html css popupwindow

我有一个类似下面的代码,它在我的Chrome浏览器中显示一条弹出消息,但我已经在其他浏览器(如Firefox和Edge)上测试了它,这不起作用,它只是一个奇怪的外观框页面的末尾......代码是:

var iframe = document.createElement("IFRAME");
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        if(window.frames[0].window.confirm("Are you sure you want to change brand state? Note: Changing brand state from Preview to Live will erase all data related to that brand.")) {
            $.post("/brand/updateBrandState", {
                'brandId': $(this).val(),
                "brandState": $(this).find("option:selected").text()
            }, function (data) {
                if (data == "ok") {
                    window.location.reload(true);
                }else if(data=="empty") {
                    alert("Cannot change state from Live to Preview");
                    window.location.reload(true);
                }else if(data=="live") {
                    alert("Brand is now live!");
                }
            });

有人可以帮助我让它在其他浏览器上运行吗?

谢谢!

编辑:

现在我正在使用这个html:

 <div id="dialog" title="Basic dialog"> 
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div>

1 个答案:

答案 0 :(得分:0)

对于弹出框,请使用jQuery Dialog。易于使用并受所有浏览器支持(支持jquery)。

<强>样本

$("#myDialog").dialog({
    resizable: false,
    height: 140,
    modal: true,
    buttons: [
        {
            text: "Yes",
            click: function () {
                $(this).dialog("close");
                //Do some Job
            },
        },
        {
            text: "No",
            click: function () {
                $(this).dialog("close");
            },
        }

    ],
    open: function (event, ui) {
    //add some functionality or styling if you want
    },
    //same for close,drag,dragStart,dragStop,focus and all
});

希望它有所帮助。