对话框/Tips

Bootstrap 自定义模态窗口样式

面包多

Bootstrap 自定义模态窗口样式-创客云
这是一款 Bootstrap 自定义模态窗口样式,高模态窗口通过简单的 CSS 代码,将原生的 bootstrap 模态窗口进行美化。

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
  3. <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.                                 <div class="icon"> ! </div>
  17.                                 <h3 class="title">Warning!</h3>
  18.                                 <p class="description">Lorem Ipsum dolor sit amet</p>
  19.                                 <button class="subscribe">Lorem Ipsum</button>
  20.                             </div>
  21.                         </div>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </div>

CSS 样式

  1. .modal-box{ font-family: 'Roboto', sans-serif; }
  2. .modal-box .show-modal{
  3.     color: #fff;
  4.     background-color: #555;
  5.     font-size: 18px;
  6.     font-weight: 600;
  7.     text-transform: capitalize;
  8.     padding: 10px 15px;
  9.     margin: 80px auto 0;
  10.     border: none;
  11.     outline: none;
  12.     box-shadow: -5px 5px 1px rgba(0,0,0,0.2);
  13.     display: block;
  14. }
  15. .modal-box .show-modal:hover{
  16.     color: #fff;
  17.     text-decoration: none;
  18.     border: none;
  19.     outline: none;
  20. }
  21. .modal-backdrop.in{ opacity: 0; }
  22. .modal-box .modal{ top: 70px !important; }
  23. .modal-box .modal-dialog{
  24.     width: 400px;
  25.     margin: 30px auto 10px;
  26. }
  27. .modal-box .modal-dialog .modal-content{
  28.     text-align: center;
  29.     border: 3px solid #FFB300;
  30.     border-radius: 15px;
  31.     box-shadow: -12px 12px 1px rgba(0, 0,0,0.2);
  32.     position: relative;
  33.     z-index: 1;
  34. }
  35. .modal-box .modal-dialog .modal-content:before,
  36. .modal-box .modal-dialog .modal-content:after{
  37.     content: "";
  38.     background: linear-gradient(-32deg, #FFB300 49%,#FFC700 50%);
  39.     width: 100%;
  40.     height: 70%;
  41.     border-radius: 12px 12px 0 0;
  42.     position: absolute;
  43.     top: 0;
  44.     left: 0;
  45.     z-index: 0;
  46. }
  47. .modal-box .modal-dialog .modal-content:after{
  48.     background: #FFB300;
  49.     width: 25px;
  50.     height: 25px;
  51.     border-radius: 0;
  52.     transform: translateX(-50%) rotate(45deg);
  53.     left: 50%;
  54.     bottom: 100px;
  55.     top: auto;
  56. }
  57. .modal-box .modal-dialog .modal-content .close{
  58.     color: #4D4D4D;
  59.     background-color: #fff;
  60.     font-size: 32px;
  61.     line-height: 30px;
  62.     height: 35px;
  63.     width: 35px;
  64.     border: 3px solid #FFB300;
  65.     border-radius: 50%;
  66.     box-shadow: -5px 5px 1px rgba(0,0,0,0.1);
  67.     opacity: 1;
  68.     position: absolute;
  69.     left: auto;
  70.     right: -10px;
  71.     top: -10px;
  72.     z-index: 1;
  73.     transition: all 0.3s;
  74. }
  75. .modal-box .modal-dialog .modal-content .close:hover{
  76.     color: #fff;
  77.     background-color: #4D4D4D;
  78.     border: 3px solid #262628;
  79. }
  80. .modal-box .modal-dialog .modal-content .modal-body{ padding: 20px 20px 30px !important; }
  81. .modal-box .modal-dialog .modal-content .modal-body .icon{
  82.     color: #3E3E40;
  83.     background: #fff;
  84.     font-size: 80px;
  85.     font-weight: 600;
  86.     text-align: center;
  87.     line-height: 140px;
  88.     height: 110px;
  89.     width: 110px;
  90.     margin: 0 auto 20px;
  91.     -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  92.     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  93. }
  94. .modal-box .modal-dialog .modal-content .modal-body .title{
  95.     color: #3B393F;
  96.     font-family: 'Archivo Black', sans-serif;
  97.     font-size: 50px;
  98.     text-transform: capitalize;
  99.     margin: 0 0 5px 0;
  100. }
  101. .modal-box .modal-dialog .modal-content .modal-body .description{
  102.     color: #3B393F;
  103.     font-size: 16px;
  104.     margin: 0 0 60px;
  105. }
  106. .modal-box .modal-dialog .modal-content .modal-body .subscribe{
  107.     color: #fff;
  108.     background: #3E3E40;
  109.     font-size: 18px;
  110.     padding: 8px 40px;
  111.     font-weight: 500;
  112.     text-transform: uppercase;
  113.     margin: 0 auto;
  114.     border: 3px solid #262628;
  115.     box-shadow: -5px 5px 1px rgba(0,0,0,0.3);
  116.     border-radius: 8px;
  117.     display: block;
  118.     transition: all 0.3s;
  119. }
  120. .modal-box .modal-dialog .modal-content .modal-body .subscribe:hover{
  121.     color: #3B393F;
  122.     background: #FFC700;
  123.     border: 3px solid #FFB300;
  124. }
  125. @media only screen and (max-width: 576px){
  126.     .modal-dialog{ width: 96% !important; }
  127. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!