原生和jquery的弹框

最新推荐文章于 2024-05-10 09:56:17 发布

Cryday

最新推荐文章于 2024-05-10 09:56:17 发布

阅读量947

点赞数

本文链接：https://blog.youkuaiyun.com/Cryday/article/details/81103225

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>商品订单</title>
<script src="jquery-3.3.1.min.js"></script>
   <style>
    /* 弹框的有样式 */
.pop{
    max-width:700px;
    background-color:#ffffff;
    padding:20px;
box-shadow:0 0 20px 3px rgba(0,0,0,0.4);
border-radius: 5px;
display:none;
position:absolute;
z-index:110;
}
.cancel{
    width:100%;
    height:30px;
}
   .cancel img{
      width:25px;
      height:25px;
      float:right;
}
.pop p{
   width:100%;
   height:40px;
   text-align:center;
line-height:40px;
}
.pop p:nth-of-type(1){
   color:#1FA1DF;
   font-size:18px;
   font-weight:bold;

}
.pop p:nth-of-type(2){
    color:#333333;
    font-size:14px;
}
.pop p:nth-of-type(2) span{
    color:#f00;
}
.pop p:nth-of-type(3){
color:#333333;
font-size:18px;
font-weight:bold;
}
.pop .button{
width:64%;
height:40px;
margin:40px auto 20px;
}
.pop .button a{
display:block;
float:left;
width:140px;
height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
font-size:14px;
border-radius: 6px;
}
.pop .button a:nth-of-type(1){
color:#333;
background-color:#f2f2f2;
}
.pop .button a:nth-of-type(2){
color:#ffffff;
background-color:#169BD5;
margin-left:50px;
}
/*点击按钮*/
.clickBtn{
display:block;
width:150px;
height:40px;
line-height:40px;
background-color:#ccc;
text-align:center;
text-decoration: none;
color:#fff;
}
#mb{
width:100%;
height:100%;
background-color:rgba(0,0,0,0.3);
position:fixed;
top:0;
left:0;
z-index:100;
display:none;
}
   </style>
</head>
<body>

<a href="javascript:;" class="clickBtn" id="clickBtn" οnclick="pop()">点击事件</a>
<div id="mb"></div>
   <div class="pop" id="pop">
       <p>该功能需要付费升级后使用</p>
       <p>该账号目前为普通账号，不能使用<span>商城、</span><span>防伪、</span><span>促销</span>功能，徐付费升级后才能使用。</p>
       <p>1999元/年</p>
       <div class="button">
<a href="#" οnclick="stop();">取消</a>
           <a href="#">我要升级</a>
       </div>
   </div>


</body>
<script>
function stop() {
$('#mb').toggle();
$('.pop').toggle();
}

function showpop(){
pop.style.display = 'block';
mb.style.display = 'block';
var dW = document.documentElement.clientWidth;
if(dW<=800){
dW = 800;
}
var dH = document.documentElement.scrollHeight;
mb.style.width = dW+'px';
mb.style.height = dH+'px';
var newLeft = document.documentElement.clientWidth/2 - pop.offsetWidth/2;
var newTop = document.documentElement.clientHeight/2 - pop.offsetHeight/2;
pop.style.left = newLeft +'px';
pop.style.top = newTop +'px';
}

clickBtn.onclick = function(){
showpop();
}
window.onresize = function(){
if(pop.style.display == 'block'){
showpop();
}
}
close.onclick = function(){
mb.style.display = 'none';
pop.style.display = 'none';
}*/
</script>

</html>