layer封装

与同类弹出层组件相比，layer的优势比较明显，它尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升，在多层模式的回调处理中，具备其它多数层组件所没有的“独立不冲突”，您完全可以大可放心地在页面弹出任意数量的层，它们彼此不妨碍。
封装layer：

define(['bootstrap'], function(bootstrap) {
    var layer = {
        modal: function (params) {
            //html文档末尾插入
            var html = $('<div class="modal fade" id="layerModal" 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">'+params.title+'</h4>\
                        </div>\
                        <div class="modal-body">\
                            <iframe src="'+params.url+'" width="100%" height="100%" frameborder="0"></iframe>\
                        </div>\
                    </div>\
                </div>\
            </div>');
            html.find('iframe').css({width: params.area[0], height: params[1]});
            $('body').append(html);
            $('#layerModal').modal();
        },
        msg:function(message){
            var html = $('<div class="modal fade" id="layermsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
                <div class="modal-dialog modal-sm" role="document">\
                    <div class="modal-content">\
                        <div class="modal-body">\
                            '+message+'\
                        </div>\
                        <div class="modal-footer">\
                        <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>\
                        </div>\
                    </div>\
                </div>\
            </div>');
            $('body').append(html);
            $('#layermsg').modal();
        },
        confirm:function(message){
            var html = $('<div class="modal fade" id="layerconfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">\
                <div class="modal-dialog modal-sm" role="document">\
                    <div class="modal-content">\
                        <div class="modal-body">\
                            '+message+'\
                        </div>\
                        <div class="modal-footer">\
                        <button type="button" class="btn btn-primary">确定</button>\
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>\
                        </div>\
                    </div>\
                </div>\
            </div>');
            $('body').append(html);
            $('#layerconfirm').modal();
        },
    }
  return layer;
})
  

引入与调用：

<script src="../static/js/require.js"></script>
<script src="../static/bootstrap/js/jquery-1.12.2.js"></script>
<script>
require.config({
  baseUrl:'../static/bootstrap/',
  paths:{
    "bootstrap":"js/bootstrap",
    "layer":"layer/layer",
    "tool":"js/tool"

  }
})
require(['bootstrap','layer','tool'],function(bootstrap,layer){
  $('#add').on('click', function () {
    layer.modal({
      title:'角色添加',
      url:'./角色添加.html',
      area:['100%','300px']
    });
  })
  $('#edit').on('click',function(){
    if($(':checked').length > 1){
      layer.msg('只能选择一项');
      return false;
    }else if($(':checked').length < 1){
      layer.msg('请选择要操作的选项');
      return false;
    }
  })

  $('#delete').on('click',function(){
    if($(':checked').length < 1){
      layer.msg('请选择要操作的选项');
      return false;
    }
    layer.confirm('确定要删除吗？');
    
  });


  $('.checkall').checkedAll('.itemcheckbox');
})

</script>