Bootstrap 模态窗口美化特效

创客云


这是一款bootstrap模态窗口美化特效,该特效在原生bootstrap模态窗口的基础上,通过添加自定义的CSS样式,制作出效果非常炫酷的模态窗口。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" href="http://jrain.oscitas.netdna-cdn.com/tutorial/css/fontawesome-all.min.css">
  2. <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  3. <script src="js/jquery.min.js" type="text/javascript"></script>
  4. <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML结构

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <div class="modal-box">
  5.                 <!-- Button trigger modal -->
  6.                 <button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#myModal">
  7.                   view modal
  8.                 </button>
  9.  
  10.                 <!-- Modal -->
  11.                 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  12.                     <div class="modal-dialog" role="document">
  13.                         <div class="modal-content">
  14.                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  15.                             <div class="modal-body">
  16.                                 <h3 class="title">Hi there!</h3>
  17.                                 <h4 class="sub-title" >stay in the loop with all things nyc pretty!</h4>
  18.                                 <div class="form-group">
  19.                                     <input class="form-control user" type="name" placeholder="Name" />
  20.                                     <input class="form-control user" type="email" placeholder="Email" />
  21.                                 </div>
  22.                                 <button class="subscribe">Subscribe</button>
  23.                             </div>
  24.                         </div>
  25.                     </div>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </div>

CSS样式

  1. .modal-box{ font-family: 'Yeseva One', cursive; }
  2. .modal-box .show-modal{
  3.     color: #fff;
  4.     background-color: #ED4521;
  5.     font-size: 18px;
  6.     font-weight: 600;
  7.     font-style: italic;
  8.     text-transform: capitalize;
  9.     letter-spacing: 1px;
  10.     padding: 10px 15px;
  11.     margin: 80px auto 0;
  12.     border: none;
  13.     outline: none;
  14.     box-shadow: 0 0 15px rgb(237, 69, 33);
  15.     display: block;
  16. }
  17. .modal-box .show-modal:hover,
  18. .modal-box .show-modal:focus{
  19.     color: #fff;
  20.     border: none;
  21.     outline: none;
  22.     text-decoration: none;
  23. }
  24. .modal-backdrop.in{ opacity: 0; }
  25. .modal-box .modal{ top: 70px !important; }
  26. .modal-box .modal-dialog{
  27.     width: 400px;
  28.     margin: 30px auto 10px;
  29. }
  30. .modal-box .modal-dialog .modal-content{
  31.     background: #FCEBE3;
  32.     text-align: center;
  33.     border: 1px solid transparent;
  34.     box-shadow: 0 0 10px rgba(0, 5, 85, .2);
  35. }
  36. .modal-box .modal-dialog .modal-content .close{
  37.     color: #222;
  38.     font-size: 28px;
  39.     text-shadow: none;
  40.     line-height: 15px;
  41.     opacity: 1;
  42.     position: absolute;
  43.     left: auto;
  44.     right: 10px;
  45.     top: 10px;
  46.     z-index: 1;
  47.     transition: all 0.3s;
  48. }
  49. .modal-box .modal-dialog .modal-content .close:hover{ color:#ED4521; }
  50. .modal-box .modal-dialog .modal-content .modal-body{ padding: 50px 20px !important; }
  51. .modal-box .modal-dialog .modal-content .modal-body .title{
  52.     color: #222;
  53.     font-family: 'Homemade Apple', cursive;
  54.     font-size: 30px;
  55.     margin: 0 0 20px 0;
  56. }
  57. .modal-box .modal-dialog .modal-content .modal-body .sub-title{
  58.     color: #ED4521;
  59.     font-size: 30px;
  60.     text-transform: uppercase;
  61.     margin: 0 0 15px;
  62. }
  63. .modal-box .modal-dialog .modal-content .modal-body .form-group{ margin: 0 0 30px; }
  64. .modal-box .modal-dialog .modal-content .modal-body .form-control{
  65.     background: none;
  66.     width: 80%;
  67.     margin: 0 auto 20px;
  68.     border: none;
  69.     border-bottom: 1px solid #BFB7B4;
  70.     border-radius: 0;
  71.     box-shadow: none;
  72. }
  73. .modal-box .modal-dialog .modal-content .modal-body .form-control::placeholder{
  74.     color: #000;
  75.     font-size: 13px;
  76. }
  77. .modal-box .modal-dialog .modal-content .modal-body .form-control:focus{
  78.     box-shadow: none;
  79.     border: none;
  80.     border-bottom: 1px solid #BFB7B4;
  81. }
  82. .modal-box .modal-dialog .modal-content .modal-body .subscribe{
  83.     color: #fff;
  84.     background: #ED4521;
  85.     font-size: 18px;
  86.     text-transform: uppercase;
  87.     padding: 6px 20px;
  88.     margin: 0 auto;
  89.     border: none;
  90.     display: block;
  91.     position: relative;
  92.     z-index: 1;
  93.     transition: all 0.4s ease 0s;
  94. }
  95. .modal-box .modal-dialog .modal-content .modal-body .subscribe:hover{ transform: translateY(-6px); }
  96. .modal-box .modal-dialog .modal-content .modal-body .subscribe:after{
  97.     content: "";
  98.     background: radial-gradient(ellipse at center center , rgba(211, 42, 0,0.49) 0%, rgba(0, 0, 0, 0) 80%);
  99.     height: 10px;
  100.     width: 100%;
  101.     opacity: 0;
  102.     position: absolute;
  103.     left: 0;
  104.     top: 100%;
  105.     z-index: -1;
  106.     transition-duration: 0.3s;
  107. }
  108. .modal-box .modal-dialog .modal-content .modal-body .subscribe:hover:after{
  109.     opacity: 1;
  110.     transform: translateY(5px);
  111. }
  112. @media only screen and (max-width: 479px){
  113.     .modal-dialog{ width: 98% !important; }
  114. }
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/48413.html
云模板

发表评论