原汁原味的Bootstrap弹窗modal

来源:https://www.sucaihuo.com/js/2657.html 2017-08-06 23:39浏览(1167) 收藏

一款原汁原味的Bootstrap弹窗modal,点击“打开弹窗”的按钮就能看到提取自Bootstrap的模态窗,稍微美化了一下,样式等均可以自由调整的,喜欢的童鞋请收下吧。
原汁原味的Bootstrap弹窗modal
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入模态窗样式,并件设置页面的元素样式,代码如下:

<link type="text/css" rel="stylesheet" href="css/modal.min.css">
<style type="text/css">
body {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus,
.btn.focus {
  color: #333333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
</style>

页面的body部分,分为触发按钮button和模态窗div两个部分,代码如下:

<!-- Button trigger modal -->
<button type="button" class="btn" id="open">打开弹窗</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">秘密——吸引力法则</h4>
      </div>
      <div class="modal-body">
        <p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
        <p>这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
        <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
        <p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
        <p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
        <p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">关闭</button>
        <button type="button" class="btn" data-dismiss="modal">确认</button>
      </div>
    </div>
  </div>
</div>

页面的底部,需引入jQuery库和弹窗插件,并设置指定按钮的点击事件响应,代码如下:

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/modal.min.js"></script>

<!-- Events -->
<script type="text/javascript">
$("#open").click(function(){
	$("#myModal").modal('show');
})
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2