bootstrap的js插件效果图以及用法

bootstrap的js插件点击这里
以下使用之前均需要引入bootstrap的css和js和jQuery

一.静态模态框

效果图

代码

	    <div tabindex="-1" role="dialog">
		  <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">添加购物车</h4>
		      </div>
		      <div class="modal-body">
		        <p>添加购物车成功</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary">去购物车</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

二、动态模态图

效果图

用途：可以拿来做登录、注册
用法：直接复制过来,在class=modal-body里面设置你要的内容
data-toggle="modal"打开下面的class="modal"

<!-- 1.按钮 data-toggle="modal"打开下面的class="modal"-->
		<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
		 添加购物车
		</button>
		
		<!-- 2.模态框 -->
		<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">添加购物车成功</h4>
		      </div>
		      <div class="modal-body">
					这里面填写你要的内容
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary">添加购物车</button>
		      </div>
		    </div>
		  </div>
		</div>

三、网格系统

用法：直接在class="modal-body"里面加入表格代码，自己去官网复制

四、根据触发按钮改变模态内容

relatedTarget 事件属性返回与事件的目标节点相关的节点。
data-whatever=""的作用，里面是什么值点击了这个按钮接收者就是谁。

			$('#exampleModal').on('show.bs.modal', function (event) {
				// 1.拿到点击按钮
			  var button = $(event.relatedTarget)
			  // 2.拿到按钮里面data-whatever的值
			  var recipient = button.data('whatever')
			  // 3.设置接收者
			  var modal = $(this)
			  modal.find('.modal-title').text('New message to ' + recipient)
			  modal.find('.modal-body input').val(recipient)
			})

参数

代码例子:button按钮设置一个id=“myModal”,然后去js里面如下代码

			$('#myModal').modal({
			  keyboard: false,//
			  show:false//一来就隐藏
			})