一、layer彈出元件
下載地址:http://www.chtml.cn/topic/show/25
如何安裝：
1.下載完畢後把layer資料夾拿出放到你的工程目錄下thinkphp請放在指定的公共目錄下，以便前後臺使用。

2.layer的彈出框引用檔案

<script src="/1.9.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

3.layer框架的使用

如圖的html程式碼：

<h2 style="padding-bottom:20px;"
 
>按鈕模組：彈出框</h2>
    <div id="button">
        <a href="javascript:;" id="tanchu">資訊</a>
        <a href="javascript:;" id="xunwen">詢問層</a>
        <a href="javascript:;" id="tishi">提示層</a>
        <a href="javascript:;" id="buhuo">捕獲頁</a>
        <a
 
 href="javascript:;" id="ymc">頁面層</a>
        <a href="javascript:;" id="zdyy">自定義頁</a>
        <a href="javascript:;" id="jzc">載入層</a>
        <a href="javascript:;" id="load">loading層</a>
    </div>

layer的js控制程式碼：

//關於
$('#about').on('click', function
 
(){
    layer.alert(layer.v + ' - 賢心出品 sentsin.com');
});

$("#tanchu").click(function(){
    //墨綠深藍風
    layer.alert('墨綠風格，點選確認看深藍', {
      skin: 'layui-layer-molv' //樣式類名
      ,closeBtn: 0
    }, function(){
      layer.alert('偶吧深藍style', {
        skin: 'layui-layer-lan'
        ,closeBtn: 0
        ,shift: 4 //動畫型別
      });
    });
})

$("#xunwen").click(function(){
    //詢問框
    layer.confirm('您是如何看待前端開發？', {
      btn: ['重要','奇葩'] //按鈕
    }, function(){
      layer.msg('的確很重要', {icon: 1});
    }, function(){
      layer.msg('也可以這樣', {
        time: 20000, //20s後自動關閉
        btn: ['明白了', '知道了']
      });
    });
})

$("#tishi").click(function(){
    //提示層
    layer.msg('玩命提示中');
})


$("#buhuo").click(function(){
    //捕獲頁
    layer.open({
      type: 1,
      shade: false,
      title: false, //不顯示標題
      content: $('.layer_notice'), //捕獲的元素
      cancel: function(index){
        layer.close(index);
        this.content.hide();
        layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', {time: 5000, icon:6});
      }
    });
})

$("#ymc").click(function(){
    //頁面層
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', //加上邊框
      area: ['420px', '240px'], //寬高
      content: 'html內容'
    });
})

$("#zdyy").click(function(){
    //頁面層
    layer.open({
      type: 1,
      skin: 'layui-layer-rim', //加上邊框
      area: ['420px', '240px'], //寬高
      content: 'html內容'
    });
})

$("#jzc").click(function(){
    var index = layer.load(0, {shade: false}); //0代表載入的風格，支援0-2
});

$("#load").click(function(){
    //loading層
    var index = layer.load(1, {
      shade: [0.1,'#fff'] //0.1透明度的白色背景
    });
})

<script src="/1.11.1/jquery.min.js"></script>  
 <script src="/js/bootstrap.min.js"></script>  
 <script src="/bootbox.js"></script>  

html頁面模態框控制程式碼：

<a href="javascript:;" val="" class="del"></a>

js控制程式碼

$(".del").click(function(){
                var url = $(this).attr('val');
                bootbox.confirm({
                    title: "系統提示",
                    message: "是否要該文章？", 
                    callback:function(result){
                        if(result){

                }
                    },
                    buttons: {
                        "cancel" : {"label" : "取消"},
                        "confirm" : {
                                "label" : "確定",
                                "className" : "btn-danger"
                            }
                    }
                });
            });

bootstrap.min.js

html程式碼：
演示模態框

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

大小提示模態框

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>