9、jQuery插件之easydialog-v2.0弹窗插件

小咪咪 2022-06-15 06:50 184阅读 0赞

<!DOCTYPE html>

<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <link rel="stylesheet" href="easydialog.css" />  
        <script src="easydialog.min.js"></script>  
        <style>  
            \* \{ margin:0;padding:0; \}  
            body \{ background:\#fff; font:12px/150% "Lucida Sans Unicode", "Lucida Grande", sans-serif; \}  
            a\{ color:\#09c; \}  
            a:hover\{ color:\#000; text-decoration:none; \}  
            .f\_l\{ float:left; \}  
            .f\_r\{ float:right; \}  
            .header\{ background:\#f5f5f5; height:60px; border-bottom:1px solid \#e5e5e5; width:100%; \}  
            .header\_box\{ width:960px; margin:0 auto; overflow:hidden; line-height:60px; \}  
            .header\_box .logo\{ font-size:24px; font-weight:400; color:\#333; height:30px; line-height:30px; float:left; border-right:2px solid \#c9c9c9; margin-top:15px; padding-right:20px; \}  
            .header\_box .sub\_tit\{ font-size:22px; font-weight:400; font-family:'宋体'; color:\#666; height:30px; line-height:30px; overflow:hidden; margin-top:15px; float:left; padding-left:20px; \}  
            .header\_box .f\_r\{ font-size:12px; margin:5px -10px 0 0; \}  
            .header\_box .f\_r a\{ margin-right:10px; \}  
            .wrapper\{ width:960px; margin:2% auto 0; padding-bottom:100px; \}  
            .wrapper h3\{ font-size:14px; font-weight:700; color:\#333; height:30px; line-height:30px; font-family:"Microsoft yahei", Arial; margin-bottom:5px; \}  
            .code\_box\{ width:960px; overflow:hidden; border-bottom:1px solid \#e1e1e1; padding-bottom:20px; margin-bottom:40px; \}  
            .code\_box pre\{ width:340px; background:\#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid \#eee; float:left; color:\#333; \}  
            .code\_box,.run\{ border:1px solid; border-radius:2px; cursor:pointer; font-family:"Microsoft yahei", Arial; font-size:12px; width:250px; height:22px; line-height:22px; display:block; text-align:center; border-color:\#c3c3c3; background:\#ececec; color:\#333; background:-webkit-gradient(linear,center bottom,center top,from(\#ececec),to(\#f4f4f4)); background:-moz-linear-gradient(90deg,\#ececec,\#f4f4f4); text-decoration:none; \}  
            .con\_right\{ width:558px; float:left; padding-left:20px; \}  
            .con\_right p\{ font-size:13px; color:\#515151; margin-bottom:10px; line-height:24px; \}  
  
            .param\_tb\{ width:960px; border-collapse:collapse; border-bottom:1px solid \#e1e1e1; border-left:1px solid \#e1e1e1; font-size:13px; color:\#333; \}  
            .param\_tb tr td\{ line-height:20px; padding:5px 0; text-align:center; border-right:1px solid \#e1e1e1; border-bottom:1px solid \#e1e1e1; \}  
            .param\_tb tr .t\_l\{ text-align:left; padding:5px 10px; \}  
            .param\_tb .even td\{ background:\#f5f5f5; \}  
            .param\_tb th\{ background:\#f5f5f5; line-height:40px; border-right:1px solid \#e1e1e1; font-family:"Microsoft yahei", Arial; font-size:14px; font-weight:700; border-top:2px solid \#4D90F0; \}  
            .param\_tb p\{ line-height:20px; padding:5px 0; \}  
  
            .html\_code\{ margin-top:50px; \}  
            .html\_code p\{ font-size:13px; margin-bottom:10px; \}  
            .html\_code pre\{ width:918px; background:\#f5f5f5; padding:10px 20px; font-family:"Consolas","Courier New",Courier,mono; font-size:13px; line-height:18px; border:1px solid \#eee; color:\#333; margin-bottom:20px; \}  
  
            \#imgBox\{ border:1px solid \#d3d3d3; padding:5px; background:\#fff; width:600px; height:375px; \}  
        </style>  
    </head>  
    <body>  
    <a href="javascript:void(0)" class="run" id="demoBtn1">使用默认的HTML模板</a>  
    <a href="javascript:void(0)" class="run" id="demoBtn2">默认模板只有content</a>  
    <a href="javascript:void(0)" class="run" id="demoBtn3">自定义弹出层</a>  
    <a href="javascript:void(0)" class="run" id="demoBtn4">遮罩层</a>  
    <a href="javascript:void(0)" class="run" id="demoBtn5">跟随定位</a>  
    <a href="javascript:void(0)" class="run" id="demoBtn6">关闭拖拽</a>  
    <a href="javascript:void(0)" class="run" id="demoBtn7">回调函数</a>  
    </body>  
    <div id="imgBox" style="display:none;"><img src="112108729.jpg" height="377" width="498" alt="" /></div>  
    <script>  
        var ee;  
        var $ = function(ee)\{  
            return document.getElementById(ee);  
        \};  
  
        var btnFn = function( e )\{  
            alert( e.target );  
            return false;  
        \};  
  
        $('demoBtn1').onclick = function()\{  
            easyDialog.open(\{  
                container : \{  
                    header : '弹出层标题',  
                    content : '欢迎使用easyDialog : )',  
                    yesFn : btnFn,  
                    noFn : true  
                \},  
                fixed : false  
            \});  
        \};  
  
        $('demoBtn2').onclick = function()\{  
            easyDialog.open(\{  
                container : \{  
                    content : '弹出层将在2秒后关闭...'  
                \},  
                autoClose : 2000  
            \});  
        \};  
  
        $('demoBtn3').onclick = function()\{  
            easyDialog.open(\{  
                container : 'imgBox',  
                autoClose : 2000,  
                fixed : false  
            \});  
        \};  
  
        $('demoBtn4').onclick = function()\{  
            easyDialog.open(\{  
                container : \{  
                    header : '没有遮罩层',  
                    content : '欢迎使用easyDialog : )'  
                \},  
                overlay : false  
            \});  
        \};  
        easyDialog.close();//关闭弹出窗，demoBtn1~-demoBtn4 这四个有效果，后面的就没有效果  
        $('demoBtn5').onclick = function()\{  
            easyDialog.open(\{  
                container : \{  
                    header : '跟随定位',  
                    content : '弹出层可以跟随某元素绝对定位'  
                \},  
                follow : 'demoBtn5',  
                followX : -137,  
                followY : 24  
            \});  
        \};  
  
        $('demoBtn6').onclick = function()\{  
            easyDialog.open(\{  
                container : \{  
                    header : '关闭拖拽',  
                    content : '欢迎使用easyDialog : )'  
                \},  
                drag : false  
            \});  
        \};  
  
        var callFn = function()\{  
            alert( 'hello' );  
        \};  
  
        $('demoBtn7').onclick = function()\{  
            easyDialog.open(\{  
                container : \{  
                    header : '回调函数',  
                    content : '欢迎使用easyDialog : )'  
                \},  
                callback : callFn  
            \});  
        \};  
    </script>

</html>

1、使用默认的

![Center][]

2、默认只有content

![Center 1][]

3、自定义弹出层

![Center 2][]

4、没有遮罩层

![Center 3][]

5、跟随定位

![Center 4][]

6、关闭拖拽(弹出框不能拉)

![Center 5][]

7、回调函数的使用

![Center 6][]

![Center 7][]

[Center]: /images/20220615/a48ce840dd7d4f20a3c8dc57feb3a6f1.png
[Center 1]: /images/20220615/f580275a157c4a149ef3e0fecdb62c97.png
[Center 2]: /images/20220615/56d5486388254f659ac906203bc5a8ac.png
[Center 3]: /images/20220615/9cea6f5051b04c68811aaaf2ba934593.png
[Center 4]: /images/20220615/e7861b03d9384c6f8a2cb5a437b72778.png
[Center 5]: /images/20220615/a11c757a41204a65b368ee43d6db7bcd.png
[Center 6]: /images/20220615/2f9ee94ad7f84cb681759b16763b83ea.png
[Center 7]: /images/20220615/44491e37730449d1905278592fba0e7c.png