DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> bootstrap modal 模態框例子
bootstrap modal 模態框例子
編輯:WEB前端代碼     
bootstrap modal 模態框拖拽擴展


主管要求bootstrap modal 帶有拖拽移動效果.代碼如下:

 

// bootstrap 模態框窗口 移動擴展, 在bootstrap 初始化後 調用
var btModalMoveEx = function () {
    function moveEx($this) {
        var $head = $this.find(".modal-header"), $dialog = $this.find(".modal-dialog");
        var move = {isMove: false, left: 0, top: 0};
        $this.on("mousemove", function (e) {
            if (!move.isMove) return;
            $dialog.offset({top: e.pageY - move.top, left: e.pageX - move.left});
        }).on("mouseup", function () {
            move.isMove = false;
        });
        $head.on("mousedown", function (e) {
            move.isMove = true;
            var offset = $dialog.offset();
            move.left = e.pageX - offset.left;
            move.top = e.pageY - offset.top;
        });
    }

    var old = $.fn.modal;
    $.fn.modal = function (o, _r) {
        var $this = $(this);
        // 標識 是否已經綁定過移動事件了.用於防止重復綁定
        if ($this.attr("isbindmv")) return old.call(this, o, _r);
        $this.attr("isbindmv", "1");

        moveEx($this);
        return old.call(this, o, _r);
    };
};

CSS 

.modal[isbindmv] .modal-header {
    cursor: move;
}

 

使用方式

$('#editModal').modal({backdrop: 'static'});

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved