css + js animation 簡單模態框製作

**

覺得模態框製作是一件很難的事？那你就out， Let me show you ！靜下心來，10分鐘教你做一個模態框！

**

靜不下新來的直接下源碼看：下載源碼

1 S T

準備個空白htm文件，css文件，然後引入css文件

2 N D

首先 ，你需要知道原理，按常理說，簡單的彈出模態框就只需要兩個div，一個是外層的div ， 用來實現當你調用模態框的時候的背景變爲全灰和不可選狀態；再有一個內層的div，用來展示你模態框的內容的容器。我是把整個容器封成了JS對象API，供大家調用。

上代碼：

        function Modelbox() {
       this.set = function(params) {
       $("body").append('<div class="model-box" id="modelbox"><div class="model-alert" id="modelalert"></div></div>');
        $("#modelalert").css(params.direction, params.fromwhere + '%').empty();
        // params.direction  
        // params.speed
        // params.from
        // params.to
        // params.fromwhere
        // params.towhere
        // params.templateURL
        $.ajax({
            'method': 'get',
            'url': params.templateURL,
            success: function(response) {
                $("#modelalert").append(response);
            }
        })

        this.show = function() {
            $("#modelbox").show();
            if (params.direction == 'left') {
                $("#modelalert").animate({
                    left: params.towhere + '%'
                }, params.speed);
                $("#modelbox").click(function() {

                    $("#modelalert").animate({
                        left: params.fromwhere + "%"
                    }, params.speed, function() {
                        // body...
                        $("#modelbox").hide();
                        $("#modelbox").remove();
                    });
                });
            } else {
                $("#modelalert").animate({
                    right: params.towhere + '%'
                }, params.speed);
                $("#modelbox").click(function() {
                    $("#modelalert").animate({
                        right: params.fromwhere + "%"
                    }, params.speed, function() {
                        // body...
                        $("#modelbox").hide();
                        $("#modelbox").remove();
                    });

                });
            }
            $("#modelalert").click(function(event) {
                // event.stopPropagation();
                return false;
            })
        }
        show();
    }
    return this;
   }

首先，這是一個類，類中有兩個成員，set 和 show， set用於設置初始化的參數，比如說彈出的方向，位置，速度等， show 用於實例化參數，方便容器調用

CSS CODE:

   .model-box{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color:#C9C9C9;
    opacity: 0.5;
    display: none;
    cursor: not-allowed;
}
.model-alert{
    position: absolute;
    top: 5em;
    width:60%;
    height: 80%;
    background-color: #fff;
    color:#000;
    opacity: 1.5;
    box-shadow: 1px 1px 3px 3px #7A7575;
    cursor: pointer;
}

model-box用於設置外層div容器的css，model-alert用於設置內層css的樣式。

3 R D

實例化並調用：

var model = Modelbox();

$("#model").click(function(){
  model.set({
    'direction': 'right',
    'fromwhere': 160,
    'towhere': 20,
    'speed': 'slow',
    'templateURL': 'tpls/gets/msg.html'
  });
});

這裏設置了一個ID 爲model的button用來觸該模態框，directon爲模態框彈出的方向，fromwhere 是模態框的初始位置，單位%，towhere爲模態框的終點位置，speed爲彈出的速度，對應的值可以參考animation函數的speed，templateURL爲容器中的內容，可以是另外一個html文件，這樣方便編寫。

讓我們來看看效果（記得放在本地服務器下測試哦~~）：