页面的head部分，需要引入bootstrap-grid.min.css和示例样式文件demo.css，代码如下：

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">

页面的body部分，3种不同的效果分别放入不同的div容器里，代码如下：

<div class="container">
	<h3 class="center">点击下面的按钮查看效果：</h3>
	<div class="row mt50 pt50">
		<div class="col-md-4"><a id="btn" class="btn btn-lg btn-success">右切</a></div>
		<div class="col-md-4"><a id="btn2" class="btn btn-lg btn-success">左切</a></div>
		<div class="col-md-4"><a id="btn3" class="btn btn-lg btn-success">上切</a></div>
	</div>
</div>
<!--模态窗口中的内容-->
<div id="sampledata1" class="bringins-content">
	<h2>要求</h2>
	<p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
	<p>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
</div>
<div id="sampledata2" class="bringins-content">
	<h2>信念</h2>
	<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p>
	<p>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”</p>
</div>
<div id="sampledata3" class="bringins-content">
	<h2>接受</h2>
	<p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
	<p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
</div>

页面的底部，需要引入jQuery库和一个JS插件，并设置好鼠标点击的事件响应，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bringins.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#btn').click(function(){
		$('#sampledata1').bringins();
	});
	$('#btn2').click(function(){
		$('#sampledata2').bringins({
			"position":"left",
			"color":"#d2527f",
			"width":"40%",
			"closeButton":"white"
		});
	});
	$('#btn3').click(function(){
		$('#sampledata3').bringins({
			"position":"center",
			"color":"black",
			"closeButton":"white",
			"width":"100%"
		});
	});
});
</script>