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

最新推荐文章于 2024-05-18 09:39:07 发布

sensus森森

最新推荐文章于 2024-05-18 09:39:07 发布

阅读量1.4k

点赞数

分类专栏： jQuery 文章标签：弹窗插件 jquery插件插件

本文链接：https://blog.csdn.net/qq_27682041/article/details/72771350

版权

jQuery 专栏收录该内容

21 篇文章 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、使用默认的

2、默认只有content

3、自定义弹出层

4、没有遮罩层

5、跟随定位

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

7、回调函数的使用

sensus森森

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9、jQuery插件之easydialog-v2.0弹窗插件

* { 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
复制链接

扫一扫

专栏目录