jQuery Dialog弹出层对话框插件演示

基本操作

默认的
new Dialog('这是一个默认对话框').show();

非模态对话框
new Dialog('非模态对话框,可以打开多个!',{modal:false}).show();

自动关闭
new Dialog('5秒后自动关闭',{time:5000}).show();

非fixed模式
new Dialog('对话框不随滚动条移动',{fixed:false}).show();

显示指定ID的内容
// 将显示本标签内的内容。
new Dialog({type:'id',value:'content-type-id'}).show();

加载一张图片
new Dialog({type:'img',value:'http://www.caixw.com/public/uploads/demo/images/300x125.gif'}).show();

加载一URL到iframe
new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();

加载一URL地址
new Dialog({type:'url',value:'http://www.caixw.com/public/uploads/demo/jquery/dialog/test.html'}).show();



自定义CSS

自定义背景遮盖层
#dialog1-overlay
{
  background:blue;
  opacity:0.8;
  filter:alpha(opacity=80);
}


自定义内容部分背景
#dialog2 .content
{
  width:250px;
  height:80px;
  background-image:url(http://www.caixw.com/public/uploads/demo/images/300x125.gif);
}


回调函数

show()函数
new Dialog('show()回调函数'
    {beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}})
    .show();


hide()函数
dlg = new Dialog('hide()回调函数'
    {beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}})
    .show();
dlg.hide();

close()函数
new Dialog('close()回调函数'
    {beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}})
    .show();


js
/**
 * Dialog
 *
 * @author    caixw <http://www.caixw.com>
 * @copyright Copyright (C) 2010, http://www.caixw.com
 * @license   FreeBSD license
 */


/**
 * jQuery的Dialog插件。
 *
 * @param object content
 * @param object options 选项。
 * @return 
 */
function Dialog(content, options)
{
    var defaults = { // 默认值。 
        title:'标题',       // 标题文本,若不想显示title请通过CSS设置其display为none 
        showTitle:true,     // 是否显示标题栏。
        closeText:'[关闭]', // 关闭按钮文字,若不想显示关闭按钮请通过CSS设置其display为none 
        draggable:true,     // 是否移动 
        modal:true,         // 是否是模态对话框 
        center:true,        // 是否居中。 
        fixed:true,         // 是否跟随页面滚动。
        time:0,             // 自动关闭时间,为0表示不会自动关闭。 
        id:false            // 对话框的id,若为false,则由系统自动产生一个唯一id。 
    };
    var options = $.extend(defaults, options);
    options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID
    var overlayId = options.id + '-overlay'; // 遮罩层ID
    var timeId = null;  // 自动关闭计时器 
    var isShow = false;
    var isIe = $.browser.msie;
    var isIe6 = $.browser.msie && ('6.0' == $.browser.version);

    /* 对话框的布局及标题内容。*/
    var barHtml = !options.showTitle ? '' :
        '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>';
    var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide();
    $('body').append(dialog);


    /**
     * 重置对话框的位置。
     *
     * 主要是在需要居中的时候,每次加载完内容,都要重新定位
     *
     * @return void
     */
    var resetPos = function()
    {
        /* 是否需要居中定位,必需在已经知道了dialog元素大小的情况下,才能正确居中,也就是要先设置dialog的内容。 */
        if(options.center)
        {
            var left = ($(window).width() - dialog.width()) / 2;
            var top = ($(window).height() - dialog.height()) / 2;
            if(!isIe6 && options.fixed)
            {   dialog.css({top:top,left:left});   }
            else
            {   dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()});   }
        }
    }

    /**
     * 初始化位置及一些事件函数。
     *
     * 其中的this表示Dialog对象而不是init函数。
     */
    var init = function()
    {
        /* 是否需要初始化背景遮罩层 */
        if(options.modal)
        {
            $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>');
            $('#' + overlayId).css({'left':0, 'top':0,
                    /*'width':$(document).width(),*/
                    'width':'100%',
                    /*'height':'100%',*/
                    'height':$(document).height(),
                    'z-index':++Dialog.__zindex,
                    'position':'absolute'})
                .hide();
        }

        dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'});

		/*  IE6 兼容fixed代码 */
        if(isIe6 && options.fixed)
        {
            dialog.css('position','absolute');
            resetPos();
            var top = parseInt(dialog.css('top')) - $(document).scrollTop();
            var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
            $(window).scroll(function(){
                dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
            });
        }

        /* 以下代码处理框体是否可以移动 */
        var mouse={x:0,y:0};
        function moveDialog(event)
        {
            var e = window.event || event;
            var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
            var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
            dialog.css({top:top,left:left});
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        };
        dialog.find('.bar').mousedown(function(event){
            if(!options.draggable){  return; }

            var e = window.event || event;
            mouse.x = e.clientX;
            mouse.y = e.clientY;
            $(document).bind('mousemove',moveDialog);
        });
        $(document).mouseup(function(event){
            $(document).unbind('mousemove', moveDialog);
        });

        /* 绑定一些相关事件。 */
        dialog.find('.close').bind('click', this.close);
        dialog.bind('mousedown', function(){  dialog.css('z-index', ++Dialog.__zindex); });

        // 自动关闭 
        if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }
    }


    /**
     * 设置对话框的内容。 
     *
     * @param string c 可以是HTML文本。
     * @return void
     */
    this.setContent = function(c)
    {
        var div = dialog.find('.content');
        if('object' == typeof(c))
        {
            switch(c.type.toLowerCase())
            {
            case 'id': // 将ID的内容复制过来,原来的还在。
                div.html($('#' + c.value).html());
                break;
            case 'img':
                div.html('加载中...');
                $('<img alt="" />').load(function(){div.empty().append($(this));resetPos();})
                    .attr('src',c.value);
                break;
            case 'url':
                div.html('加载中...');
                $.ajax({url:c.value,
                        success:function(html){div.html(html);resetPos();},
                        error:function(xml,textStatus,error){div.html('出错啦')}
                });
                break;
            case 'iframe':
                div.append($('<iframe src="' + c.value + '" />'));
                break;
            case 'text':
            default:
                div.html(c.value);
                break;
            }
        }
        else
        {   div.html(c); }
    }

    /**
     * 显示对话框
     */
    this.show = function()
    {
        if(undefined != options.beforeShow && !options.beforeShow())
        {   return;  }

        /**
         * 获得某一元素的透明度。IE从滤境中获得。
         *
         * @return float
         */
        var getOpacity = function(id)
        {
            if(!isIe)
            {   return $('#' + id).css('opacity');    }

            var el = document.getElementById(id);
            return (undefined != el
                    && undefined != el.filters
                    && undefined != el.filters.alpha
                    && undefined != el.filters.alpha.opacity)
                ? el.filters.alpha.opacity / 100 : 1;
        }
        /* 是否显示背景遮罩层 */
        if(options.modal)
        {   $('#' + overlayId).fadeTo('slow', getOpacity(overlayId));   }
        dialog.fadeTo('slow', getOpacity(options.id), function(){
            if(undefined != options.afterShow){   options.afterShow(); }
            isShow = true;
        });
        // 自动关闭 
        if(0 != options.time){  timeId = setTimeout(this.close, options.time);    }

        resetPos();
    }


    /**
     * 隐藏对话框。但并不取消窗口内容。
     */
    this.hide = function()
    {
        if(!isShow){ return; }

        if(undefined != options.beforeHide && !options.beforeHide())
        {   return;  }

        dialog.fadeOut('slow',function(){
            if(undefined != options.afterHide){   options.afterHide(); }
        });
        if(options.modal)
        {   $('#' + overlayId).fadeOut('slow');   }

        isShow = false;
    }

    /**
     * 关闭对话框 
     *
     * @return void
     */
    this.close = function()
    {
        if(undefined != options.beforeClose && !options.beforeClose())
        {   return;  }

        dialog.fadeOut('slow', function(){
            $(this).remove();
            isShow = false;
            if(undefined != options.afterClose){   options.afterClose(); }
        });
        if(options.modal)
        {   $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); }
        clearTimeout(timeId);
    }

    

    init.call(this);
    this.setContent(content);
    
    Dialog.__count++;
    Dialog.__zindex++;
}
Dialog.__zindex = 500;
Dialog.__count = 1;
Dialog.version = '1.0 beta';

function dialog(content, options)
{
	var dlg = new Dialog(content, options);
	dlg.show();
	return dlg;
}


css
@charset "utf-8";

.dialog-overlay
{
    opacity:0.5;
    filter:alpha(opacity:50);
    background:gray;
}

.dialog
{
    /*border:5px solid rgba(200,200,200,0.9);*/
    background:gray;
    padding:10px;
    opacity:0.9;
    filter:alpha(opacity:70);
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    _width:expression('200px'); /* IE6下不指定此值,会一直粘在右侧 */
}



.dialog .bar
{
    cursor:move;
    color:#fff;
    background:#000;
    padding:6px;
    min-height:15px; /* 不指定此值,在title和closeText都为空的情况下,可能移动条会消失不见 */
    _height:expression('20px'); /* ie6下不指定高度,标题栏会变得很小 */
}

.dialog .bar .title
{
    float:left;
    margin-right:10px;
}

.dialog .bar .close
{
    float:right;
    cursor:pointer;
    text-decoration:underline;
}

.dialog .content
{
    background:#fff;
    padding:10px;
}

.dialog iframe
{
    height:100%;
    width:100%;
}



/* 指定图像最大尺寸,不需要可以删除。 */
.content img
{
    overflow:auto;
    max-width:700px;
    max-height:500px;
    /* IE6版的max-width和max-height,但是也会有点BUG在图片太小时,也会显示最大值,需要同时指定width和height */
    _width:expression((document.body.clientWidth > 700) ? '700px' : 'auto');
    _height:expression((document.body.clientHeight > 500) ? '500px' : 'auto');
}



  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-dialog是一个基于Element UI的弹出组件,可以用于显示对话框、提示框、操作确认框等。它具有以下特点: - 可以自定义标题、内容、按钮等。 - 可以设置弹出的大小、位置、遮罩等样式。 - 可以通过v-model控制弹出的显示和隐藏。 - 可以通过slot插槽自定义弹出的内容。 以下是el-dialog的基本使用方法: 1. 引入Element UI库和样式文件 ```html <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 2. 创建Vue实例,并注册el-dialog组件 ```javascript Vue.component('el-dialog', ElementUI.Dialog); ``` 3. 在Vue实例中使用el-dialog组件 ```html <template> <div> <el-button @click="dialogVisible = true">打开弹出</el-button> <el-dialog v-model="dialogVisible" title="提示" :modal-append-to-body="false"> <p>这是弹出的内容</p> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> </div> </template> <script> new Vue({ el: '#app', data: { dialogVisible: false } }); </script> ``` 在上面的代码中,el-button是一个Element UI的按钮组件,@click="dialogVisible = true"表示点击按钮时将dialogVisible设置为true,从而显示弹出。el-dialog是一个Element UI的弹出组件,v-model="dialogVisible"表示控制弹出的显示和隐藏,title="提示"表示弹出的标题,:modal-append-to-body="false"表示不将遮罩插入到body元素中。在el-dialog中,p标签中的内容是弹出的主体内容,slot="footer"表示自定义弹出的底部按钮区域,el-button是Element UI的按钮组件,@click="dialogVisible = false"表示点击按钮时将dialogVisible设置为false,从而隐藏弹出

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值