css3 html js 制作订阅框弹出效果 cid1089 -网站设计教程

作者code
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  7. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  11. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  15. <style>
  19. body{ background-image: url(7.jpg); background-size: cover;}
  20. .modal-box{
  21. font-family: 'Roboto Condensed', sans-serif; }
  22. .modal-box .show-modal{
  23. color: #fff;
  24. background: #fd4159;
  25. font-size: 18px;
  26. font-weight: 600;
  27. text-transform: capitalize;
  28. padding: 15px 55px;
  29. margin: 0 auto;
  30. margin-top: 330px;
  31. border: none;
  32. outline: none;
  33. display: block;
  34. transition: all 0.3s;
  35. border: 4px solid white;
  36. cursor: pointer;
  38. }
  39. .modal-box .show-modal:hover,
  40. .modal-box .show-modal:focus{
  41. color: #fff;
  42. border: none;
  43. outline: none;
  44. text-decoration: none;
  45. box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
  46. border: 4px solid white;
  47. cursor: pointer;
  48. }
  49. .modal-backdrop.in{ opacity: 0; }
  50. .modal-box .modal{ top: 70px !important; }
  51. .modal-box .modal-dialog{
  52. width: 400px;
  53. margin: 30px auto 10px;
  54. }
  55. .modal-box .modal-dialog .modal-content{
  56. background: #DBECF6;
  57. border-radius: 25px;
  58. box-shadow: 0 0 25px -8px #555;
  59. position: relative;
  60. border: 4px solid white;
  61. }
  62. .modal-box .modal-dialog .modal-content:before{
  63. content: "";
  64. background: #fd4159;
  65. width: 100%;
  66. height: 28%;
  67. border-radius: 25px 25px 0 0;
  68. position: absolute;
  69. top: -1px;
  70. left: 0;
  71. }
  72. .modal-box .modal-dialog .modal-content .close{
  73. color: #fd4159;
  74. background-color: #fff;
  75. font-size: 20px;
  76. line-height: 28px;
  77. height: 28px;
  78. width: 28px;
  79. opacity: 1;
  80. border-radius: 50%;
  81. box-shadow: 0 0 5px #555;
  82. position: absolute;
  83. left: auto;
  84. right: -7px;
  85. top: -7px;
  86. z-index: 1;
  87. transition: all 0.3s;
  88. }
  89. .modal-box .modal-dialog .modal-content .close span{
  90. margin: 1px 0 0 0;
  91. display: block;
  92. }
  93. .modal-box .modal-dialog .modal-content .close:hover{
  94. color: #fff;
  95. background-color: #fd4159;
  96. outline: none;
  97. }
  98. .modal-box .modal-dialog .modal-content .modal-body{ padding: 30px 30px !important; }
  99. .modal-box .modal-dialog .modal-content .modal-body .icon{
  100. color: #F2F7FB;
  101. font-size: 80px;
  102. text-align: center;
  103. line-height: 100px;
  104. margin: 0 0 35px;
  105. }
  106. .modal-box .modal-dialog .modal-content .modal-body .title{
  107. color: #fd4159;
  108. font-size: 45px;
  109. font-weight: 700;
  110. text-transform: uppercase;
  111. text-align: center;
  112. margin: 0 0 10px 0;
  113. }
  114. .modal-box .modal-dialog .modal-content .modal-body .description{
  115. color: #777;
  116. font-size: 13px;
  117. text-align: center;
  118. margin: 0 0 15px;
  119. }
  120. .modal-content .form-control{
  121. color: #fd4159;
  122. font-size: 16px;
  123. text-align: center;
  124. letter-spacing: 1px;
  125. height: 45px;
  126. padding: 2px 15px 2px 15px;
  127. border-radius: 50px;
  128. display: inline-block;
  129. transition: all 0.3s;
  131. }
  132. .modal-content .form-control::placeholder{
  133. color: #909090;
  134. font-size: 14px;
  136. }
  137. .modal-content .form-control:hover,
  138. .modal-content .form-control:focus{
  139. box-shadow: 0 0 0 transparent,0 0 0 transparent, 0 0 0 transparent;
  141. }
  142. .modal-box .modal-dialog .modal-content .modal-body .subscribe{
  143. color: #fff;
  144. background: #fd4159;
  145. font-size: 18px;
  146. font-weight:700;
  147. text-transform: uppercase;
  148. padding: 10px 38px;
  149. margin: 0 auto;
  150. border: none;
  151. border-radius: 50px;
  152. overflow: hidden;
  153. display: block;
  154. position: relative;
  155. z-index: 1;
  156. transition: all 0.3s;
  157. }
  158. .modal-box .modal-dialog .modal-content .modal-body .subscribe:before{
  159. content: '';
  160. height: 100%;
  161. width: 100%;
  162. background: #fd4159;
  163. border-radius: 50px;
  164. transform: scale(0.97,0.85);
  165. position: absolute;
  166. left: 0;
  167. top: 0;
  168. z-index: -1;
  169. transition: all 0.3s;
  170. }
  173. </style>
  174. </head>
  175. <body>
  176. <div class="container">
  177. <div class="row">
  178. <div class="col-md-12">
  179. <div class="modal-box">
  180. <!-- Button trigger modal -->
  181. <button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#myModal">
  182. SUBSCRIBE NOW
  183. </button>
  185. <!-- Modal -->
  186. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  187. <div class="modal-dialog" role="document">
  188. <div class="modal-content">
  189. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  190. <div class="modal-body">
  191. <div class="icon"><i class="fa fa-check-square"></i></div>
  192. <h3 class="title">Subscribe!</h3>
  193. <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
  194. <div class="form-group">
  195. <input class="form-control" type="name" placeholder="Name">
  196. </div>
  197. <div class="form-group">
  198. <input class="form-control" type="email" placeholder="Enter email address">
  199. </div>
  200. <button class="subscribe">Subscribe</button>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. </body>
  210. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     
      
     <style>
    
       
    
    body{ background-image: url(7.jpg); background-size: cover;}
.modal-box{ 
    font-family: 'Roboto Condensed', sans-serif; }
.modal-box .show-modal{
    color: #fff;
    background: #fd4159;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 15px 55px;
     margin: 0 auto;
    margin-top: 330px;
    border: none;
    outline: none;
    display: block;
    transition: all 0.3s;
    border: 4px solid white;
    cursor: pointer;
    
}
.modal-box .show-modal:hover,
.modal-box .show-modal:focus{
    color: #fff;
    border: none;
    outline: none;
    text-decoration: none;     
    box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
    border: 4px solid white;
    cursor: pointer;
}
.modal-backdrop.in{ opacity: 0; }
.modal-box .modal{ top: 70px !important; }
.modal-box .modal-dialog{
    width: 400px;
    margin: 30px auto 10px;
}
.modal-box .modal-dialog .modal-content{
    background: #DBECF6;
    border-radius: 25px;
    box-shadow: 0 0 25px -8px #555;
    position: relative;
    border: 4px solid white;
}
.modal-box .modal-dialog .modal-content:before{
    content: "";
    background: #fd4159;
    width: 100%;
    height: 28%;
    border-radius: 25px 25px 0 0;
    position: absolute;
    top: -1px;
    left: 0;
}
.modal-box .modal-dialog .modal-content .close{
    color: #fd4159;
    background-color: #fff;
    font-size: 20px;
    line-height: 28px;
    height: 28px;
    width: 28px;
    opacity: 1;
    border-radius: 50%;
    box-shadow: 0 0 5px #555;
    position: absolute;
    left: auto;
    right: -7px;
    top: -7px;
    z-index: 1;
    transition: all 0.3s;
}
.modal-box .modal-dialog .modal-content .close span{
    margin: 1px 0 0 0;
    display: block;
}
.modal-box .modal-dialog .modal-content .close:hover{
    color: #fff;
    background-color: #fd4159;
    outline: none;
}
.modal-box .modal-dialog .modal-content .modal-body{ padding: 30px 30px !important; }
.modal-box .modal-dialog .modal-content .modal-body .icon{
    color: #F2F7FB;
    font-size: 80px;
    text-align: center;
    line-height: 100px;
    margin: 0 0 35px;
}
.modal-box .modal-dialog .modal-content .modal-body .title{
    color: #fd4159;
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 10px 0;
}
.modal-box .modal-dialog .modal-content .modal-body .description{
    color: #777;
    font-size: 13px;
    text-align: center;
    margin: 0 0 15px;
}
.modal-content .form-control{
    color: #fd4159;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1px;
    height: 45px;
    padding: 2px 15px 2px 15px;
    border-radius: 50px;
    display: inline-block;
    transition: all 0.3s;
    
}
.modal-content .form-control::placeholder{
    color: #909090;
    font-size: 14px;
     
}
.modal-content .form-control:hover,
.modal-content .form-control:focus{
    box-shadow: 0 0 0 transparent,0 0 0 transparent, 0 0 0 transparent;
 
}
.modal-box .modal-dialog .modal-content .modal-body .subscribe{
    color: #fff;
    background: #fd4159;
    font-size: 18px;
    font-weight:700;
    text-transform: uppercase;
    padding: 10px 38px;
    margin: 0 auto;
    border: none;
    border-radius: 50px;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.modal-box .modal-dialog .modal-content .modal-body .subscribe:before{
    content: '';
    height: 100%;
    width: 100%;
    background: #fd4159;
    border-radius: 50px;
    transform: scale(0.97,0.85);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transition: all 0.3s;
}
         
    
    </style>
</head>
<body>
    <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-box">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#myModal">
                  SUBSCRIBE NOW
                </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">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <div class="modal-body">
                                <div class="icon"><i class="fa fa-check-square"></i></div>
                                <h3 class="title">Subscribe!</h3>
                                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
                                <div class="form-group">
                                    <input class="form-control" type="name" placeholder="Name">
                                </div>
                                <div class="form-group">
                                    <input class="form-control" type="email" placeholder="Enter email address">
                                </div>
                                <button class="subscribe">Subscribe</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在线演示

让链接同时具备两种打开方式
获取源码: Subscribe Button Modal Poping Up
下载数:62人次, 文件大小: 394.6 KB, 上传日期: 2020年-11 月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,308 人查阅

类似文章