用JqueryUI的Dialog+IFrame实现仿模态窗口效果

页面导航:首页 > 网络编程 > JavaScript > 用JqueryUI的Dialog+IFrame实现仿模态窗口效果

用JqueryUI的Dialog+IFrame实现仿模态窗口效果

来源: 作者: 时间:2016-02-05 11:06 【

其实这是DIALOG内嵌了一个IFRAME,原理还是非常简单的。大家可以注意到,我前面用的是window open方法,只是注释掉了而已。关于具体的用法,下面的注释已经写得很清楚了。复制代码 鼠
其实这是DIALOG内嵌了一个IFRAME,原理还是非常简单的。大家可以注意到,我前面用的是window.open方法,只是注释掉了而已。关于具体的用法,下面的注释已经写得很清楚了。
 
复制代码
 //鼠标移上去展示边框
    function onHover()
    {
        ////鼠标滑过
        $(".imgBorder").hover(function () {
            $(this).attr("style", "border:2px solid red")
        });
 
        //鼠标滑出
        $(".imgBorder").mouseout(function () {
 
            $(this).attr("style", "border:0px solid red")
        });
 
        $(".imgBorder").click(function () {
 
 
 
            $("#<%=hid_Product.ClientID%>").val($(this).attr("id")); //把ID赋入隐藏域
            //alert($("#<%=hid_Product.ClientID%>").val());
           // window.open("ProductDetails.x?id=" + $(this).attr("id"), "产品修改界面", 'height=300,width=500,top=200,left=200,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
            // ShowIframe("修改信息", "http://www.baidu.com", 500, 300);
            $("#<%=hid_id.ClientID%>").val($(this).attr("id"));
 
            $("#prodcutDetailSrc").attr("src","ProductDetails.aspx?id=" + $(this).attr("id")); //设置IFRAME的SRC;
            $("#dialog").dialog({
                bgiframe: true,
                resizable: true, //是否可以重置大小
                height: 283, //高度
                width: 626, //宽度
                draggable: false, //是否可以拖动。
                title: "公司产品编辑",
                modal: true,
                open: function (e) {  //打开的时候触发的事件
                  
                    
                    document.body.style.overflow = "hidden"; //隐藏滚动条
 
                },
                close: function () { //关闭Dialog时候触发的事件
                    document.body.style.overflow = "visible";  //显示滚动条
                    Test();
                }
   
            });
           // window.showModalDialog("ProductDetails.aspx?id=" + $(this).attr("id"),"", "dialogWidth=500px;dialogHeight=200px");
        });
 
    }
复制代码
 
 
既然是一个IFRAME,那么外面肯定还要嵌套一层DIV,而这一层的DIV默认是隐藏的。
 
<div style="display:none;overflow:hidden;padding:3px" id="dialog"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" id="prodcutDetailSrc"  scrolling="no"  width="100%" height="100%"></iframe></div>
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<