pop 弹框窗口

最新推荐文章于 2021-06-26 08:28:33 发布

Tina心情很美丽

最新推荐文章于 2021-06-26 08:28:33 发布

阅读量2.9k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lovetina2017/article/details/81069070

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>
<!-- jquery的样式写法 -->
  <a href="javascript:;" class="clickBtn" id="clickBtn" onclick="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="#" onclick="stop();">取消</a>			
			<a href="#">我要升级</a>
		</div>
	</div>
  <!-- 原生的样式写法 -->
  <!-- <a href="javascript:;" class="clickBtn" id="clickBtn">点击事件</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="#" id="close">取消</a>
      <a href="#">我要升级</a>
    </div>
  </div> -->
</body>
<script> 
  function stop() {
    $('#mb').toggle();
    $('.pop').toggle();
  }

  function pop() {
      $('#mb').toggle();
      $('.pop').toggle();
      if ($(window).width() < 800) {
          $(window).width(800);
      }
      var left = $(window).width() / 2 - $('.pop').width() / 2;
      var top = $(window).height() / 2 - $('.pop').height() / 2;
      $('.pop').css({ 'left': left, 'top': top });
  }
 
</script>

<script>
 /*原生弹框的写法*/
  /*var mb = document.getElementById('mb');
  var pop = document.getElementById('pop');
  var clickBtn = document.getElementById('clickBtn');
  var close = document.getElementById('close');

  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>