实战jquery(2)-自建可拖拽模态对话框

模态对话框的实现思路

1.一个容器div，限制模态对话框的作用域，被该div覆盖的组件不可被点选。

2.容器div中一个半透明的子div，实现遮罩效果，width:100% height:100%；

3.容器div中一个对话框div，用于布局对话框中的组件。对话框包括titler、body、footer三个部分。

推拽功能的实现思路

在指定组件上监听鼠标按下(mousedown)事件，在该事件中为需要被拖拽的组件添加mousemove事件（移动组件）以及moueseup事件（结束拖拽）

效果图如下：

测试代码：

var msg = '<p class="tipgreen">请确认付款金额无误，刷卡完成缴费！</p>'+
                    '<p class="tipred">付款总额：3.0元</p>'+
                    '<br><ol id="oprationlog" class="log"><li>读卡成功，非本人卡，验证消费密码。消费密码验证成功！</li><li>aaa</li></ol><p id="tip4" class="tipgreen">20秒后返回首页!</p>';

var testDialog = $.DS.UI.Dialog.show(msg, { title:"付款确认-测试对话框"});
下面是代码和css

一、对话框代码

(function($){
    if( !$.DS ) $.DS = {};
    if( !$.DS.UI ) $.DS.UI = {};

    /**
     * 对话框构造函数。
     * @param {Object} msg
     * @param {Object} setting
     * @param {Object} owner :jQuery对象。
     */
    $.DS.UI.Dialog = function(msg, setting, owner){
        this.owner = owner;
        if( owner === undefined || null == owner ) this.owner = $(window.document.body);

        this.setting = $.extend($.DS.UI.Dialog.defaultSetting, setting);
        //创建一个容器div
        this.container = $('<div class="dialog_container"/>');
        this.mask = $('<div class="dialog_mask"/>');
        this.body = $('<div class="dialog_body"/>');

        this.container.append(this.mask);
        this.container.append(this.body);

        this.titlearea = $('<div class="dialog_body_titlearea"><img class="dialog_body_title_icon" src="'+this.setting.icon+'"/><p>'+this.setting.title+"</p></div>");
<strong><span style="color:#ff6666;">       $.DM.setDrag(this.body, this.titlearea);    //实现拖拽功能
</span></strong>        this.main = $('<div class="dialog_body_mainarea">'+msg+'</div>');
        this.footer = $('<div class="dialog_body_footarea"><button id="_btn_close">close</button></div>');
        this.body.append(this.titlearea);
        this.body.append(this.main);
        this.body.append(this.footer);

        this.footer.find("#_btn_close").click(function(){
            this.dialog.close();
        })[0].dialog = this;
    };

    $.DS.UI.Dialog.defaultSetting = {
        model:true,
        width:600,
        height:450,
        title:"对话框",
        icon:"./img/sys/dicon.png"
    };

    /**
     * 显示对话框-静态方法，用户显示一个对话框
     * @param {String} msg: 提示信息；
     * @param {Object} seeting: 对话框设置；
     * @param {Object} owner
     * 对话框遮盖对象，如果owner=null，则ownere=body
    */
    $.DS.UI.Dialog.show = function(msg, setting, owner){
        var dlg = new $.DS.UI.Dialog(msg, setting, owner)
        dlg.show();
        return dlg;
    };

    $.DS.UI.Dialog.prototype = {
        show:function(){
            this.owner.append(this.container);
            this.body.width(this.setting.width);
            //因为ff中，width:100%会多出两个像素，所以只能代码设置。
            this.titlearea.width(this.setting.width-2);
            this.body.height(this.setting.height);
            this.body.offset({left:(this.container.width()-this.setting.width)/2, top:100});
            this.main.height(this.setting.height - this.titlearea.height() - this.footer.height() );
        },

        close:function(){
            if( this.setting.closeHandler ){
                this.setting.closeHandler();
&nbs

补充：web前端 , JavaScript ,