Question

bootstrap-modal.js strict 模式下不允许一个属性有多个定义

Answer 1

先从bootstrap.modal.js的结构看起。

function($){
var Modal = function(){} //构造器
Modal.prototype = function(){} //构造器的原型
function ..(){} //自定义方法
$.fn.modal = function(){} //在jQuery对象上自定方法
$.fn.modal.defaults = {} //设置默认属性
$.fn.modal.Constructor = Modal //重置构造器名
$(function(){}) //初始化
}(window.jQuery)

其HTML结构

<a class="btn" data-toggle="modal" href="#myModal" >点击触发对话框</a>

<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<p>对话框内容</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">关闭</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">保存更新</a>
</div>
</div>

我们开始过一遍插件源码：从初始化开始

$(function () {
/*
* 在所有有data-toggle='modal'属性的标签上帮上click事件，一般为a标签
* /.*(?=#[^\s]+$)/表示如果匹配成功将#之前的信息删除
* 对于jQuery对象，比如a标签有data-xx类型的，在其data方法中都可以显示
* 将a标签data-target指向的或是href的锚点指向的元素传入modal方法里
* */
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data());
e.preventDefault()
$target.modal(option)
})
})

根据HTML提供的结构，$target为a标签所指向的弹出框div的Jquery对象。另外$this.data()存在数据，为{toggle:'modal'}，这个我在注释中已经解释。最后执行$target.modal(option)