JavaScript弹个对话框

弹出对话框

JS和浏览器默认对话框

alert、confirm、prompt

新窗口

window.open是让浏览器新打开一个页面，该页面和当前页面是属于平等平级的关系。
window.open可以传入_blank参数使浏览器新打开一个标签页，否则浏览器会新起一个窗口。

window.open(url,title,styleParameters);

示例：

window.open ('http://www.baidu.com/','测试','height=800,width=800');

新起标签页示例：

window.open(url, "_blank");//下载文件时会经常用到

模态对话框

window.showModalDialog是在当前页面打开一个模态窗口，父窗口不能获取焦点了并无法操作，只有在子窗口关闭后父窗口才可以获得焦点并继续操作，可以在子窗口中通过设置 window.returnValue的值，让父窗口可以获取返回值。

resultValue=window.showModalDialog(url,customParameters,styleParameters);

示例：

var obj = new Object();//对话框里通过window.dialogArguments来取得传递进来的参数。
var result=window.showModalDialog("http://www.baidu.com/",obj,"dialogWidth=200px;dialogHeight=100px");

子窗口代码

function getParentParameter(){
    return window.dialogArguments;
}
function setDialogReturnValue(value){
    window.returnValue=value;
}

bootstrap的modal（通过css遮罩层实现）

示例：

    <div class="modal fade" id="sample_modal_examine" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="formvalidation_examine" onkeydown="if(event.keyCode==13)return false;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">审核</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="taskId_examine" />
                        <div class="btn-group" data-toggle="buttons">
                            通过<input class="btn btn-default" type="radio" name="examine" value="5" onclick="changeV(this)" checked="checked" /> 不通过<input class="btn btn-default"
                                type="radio" name="examine" value="6" onclick="changeV(this)" />
                        </div>
                        <br /> <br /> 不通过原因：
                        <textarea id="reason" name="reason" style="width:100%;" disabled="disabled"></textarea>
                        <br />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <label type="button" class="btn btn-default" onclick="submitTaskExamine()">保存</label>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script>
$('#sample_modal_examine').modal('show');
$('#sample_modal_examine').modal('hide');
</script>

自己写的modal（通过css遮罩层实现）

    <div align="center" id="exportDateSelectDialog"
        style="display: none;background-color:white; border:1px solid #336699; position:absolute; left:50%; top:50%; font:12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif; margin-left:-225px; margin-top:npx; width:500px; height:200px; text-align:center; line-height:25px; z-index:100001;">
        <h4 id="msgTitle" align="right"
            style="margin:0; padding:3px; background-color:#336699; filter:progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100); opacity:0.75; border:1px solid #336699; height:18px; font:12px Verdana,Geneva,Arial,Helvetica,sans-serif; color:white; cursor:pointer;"
            onclick="hideDialog();">关闭</h4>
        <br /> <br />
        <table>
            <tr>
                <td>创建时间：</td>
                <td><input id="exportFilterStartTime" class="date" /></td>
                <td>至：</td>
                <td><input id="exportFilterEndTime" class="date" /></td>
            </tr>
        </table>
        <div class="modal-footer" style="margin-bottom:10px;margin-top:50px;">
            <input type="button" align="center"
                style="width:100px; align:center; margin-left:150px;" value="关闭"
                onclick="hideDialog();" />
            <input type="button" align="center"
                style="width:100px; align:center; margin-left:20px;" value="确定"
                onclick="submitBatchExportQR();"></input>
        </div>
    </div>
<script>
function hideDialog() {
    document.getElementById("exportDateSelectDialog").style.display = "none";
}
function showDialog() {
    document.getElementById("exportDateSelectDialog").style.display = "block";
}
</script>

对话框插件

artDialog插件

帮助文档地址：artDialog官方文档
示例：

    var d=dialog({title:"用户详情", url:"http://www.baidu.com/", width:800, height:600});//如果在子级iframe中使用需要这样：top.dialog({...})
    d.show();

可以设置是否模态、是否返回值、自定义相应函数、自定义对话框内容、自定义对话框样式等等。

zDialog插件

帮助文档地址：zDialog使用手册
示例：

    var diag = new Dialog();//如果在子级iframe中使用需要这样：new top.Dialog()
    diag.Title = "详情";
    diag.Width = 500;
    diag.Height = 500;
    diag.URL = "http://www.baidu.com/";
    diag.OKEvent = function(){
        var reason=this.ownerDocument.getElementById("reason").value;//获取dialog内的元素数据
        //doing work
    };
    diag.show();

可以设置是否模态、是否返回值、自定义相应函数、自定义对话框内容、自定义对话框样式等等。