jQuery UI弹出新窗体

借助jqueryUI 的Dialog 在隐藏的div中嵌入Iframe  改变iframe的路径 

如果项目经常用到弹出新窗体，则利用模板，把此代码和html 放入父页面中，实现父级调用，

 

<input type="button" value="弹出" id="btn" />
<div id="dialog-confirm" style="display: none;overflow: hidden;">

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" id="prodcutDetailSrc" scrolling="no" width="100%" height="100%"></iframe>
</div>

 

     $(function () {
            // 初始化
            $("#btn").click(function () {
                // alert("btn 被点击啦！");
                //$("#dialog-confirm").dialog("open");
                // 初始化对话框
                $("#dialog-confirm").dialog(
                    {
                        modal: true,             // 创建模式对话框
                        autoOpen: true,//是否自动打开
                        height: 400, //高度
                        width: 626, //宽度
                        title: "新窗体",
                        title_html: true,
                        buttons: {
                            "Ok": function () {
                                $("#deleteBtn").click();

                                $(this).dialog('close');



                            },
                            "Cancel": function () { $(this).dialog('close'); return false; }
                        }
                    }
                );
            })
                ;


            

            $("#prodcutDetailSrc").attr("src", "/Home/About"); //设置IFRAME的SRC;

        });

　　

 

参照https://www.cnblogs.com/kmsfan/p/4119788.html

http://www.runoob.com/jqueryui/example-dialog.html

转载于:https://www.cnblogs.com/wlzhang/p/10036320.html