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();

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