码迷,mamicode.com
首页 > Web开发 > 详细

jDialog弹出层、对话框、提示框jquery插件

时间:2015-11-02 10:23:45      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

<script>
$(function(){
    $("#test1").click(function(){
        var dialog = jDialog.alert(欢迎使用jDialog组件,我是alert!,{},{
        showShadow: false,// 不显示对话框阴影
        buttonAlign : center,
        events : {
            show : function(evt){
                var dlg = evt.data.dialog;
            },
            close : function(evt){
                var dlg = evt.data.dialog;
            },
            enterKey : function(evt){
                alert(enter key pressed!);
            },
            escKey : function(evt){
                alert(esc key pressed!);
                evt.data.dialog.close();
            }
        }
      });
    }) ; 
    
    $("#test2").click(function(){
        var dialog = jDialog.confirm(欢迎使用jDialog组件,我是confirm!,{
            handler : function(button,dialog) {
                alert(你点击了确定!);
                dialog.close();
            }
        },{
            handler : function(button,dialog) {
                alert(你点击了取消!);
                dialog.close();
            }
        });
    });
    
    $("#test3").click(function(){
        // 通过options参数,控制iframe对话框
        var dialog = jDialog.iframe(http://www.juheweb.com/,{
            title : 代码编辑器 - 聚合分享出品,
            width : 1100,
            height : 550
        });
    });
    
    $("#test4").click(function(){
        // 通过options参数,控制dialog
        var dialog = jDialog.dialog({
            title : 自定义对话框,
            content : 大家好,欢迎访问聚合分享,请大家加QQ群:774780837,一起交流!
        });
    });
    
    $("#test5").click(function(){
        // 通过options参数,控制dialog
        var dialog = jDialog.dialog({
            title : 自定义对话框,
            content : 大家好,我是jDialog.dialog!,
            buttons : [
                {
                    type : highlight,
                    text : 你好,
                    handler:function(button,dialog)
                    {
                        dialog.close();
                    }
                }
            ]
        });    
    });
    
    $("#test6").click(function(){
        var dialog = jDialog.message(大家好,欢迎访问聚合分享,{
            autoClose : 3000,    // 3s后自动关闭
            padding : 30px,    // 设置内部padding
            modal: true         // 非模态,即不显示遮罩层
        });
    });
    
    $("#dianZ").click(function(){
        var dialog = jDialog.tip(大家好,欢迎访问聚合分享,{
            target : $(#dianZ),
               position : left-top,
               trianglePosFromStart :0,
            autoClose : 1000,
            offset : {
                top :-20,
                left:10,
                right:0,
                bottom:0
               }
        });
    });
    
});
</script>

 

jDialog弹出层、对话框、提示框jquery插件

标签:

原文地址:http://www.cnblogs.com/maojiayan/p/4929374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!