当前位置：网站首页>Beginner JS BOM implementation window centered

Beginner JS BOM implementation window centered

2022-06-11 23:32:00 【A-linWeb】

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {
    
        margin: 0;
        padding: 0;
      }

      .alert {
    
        width: 300px;
        height: 150px;
        box-shadow: 0 1px 1px 1px #ccc;
        padding: 10px;
        display: none;
       
      }

      .title {
    
        height: 40px;
        line-height: 40px;
        position: relative;
      }

      .title span {
    
        position: absolute;
        right: 0;
        top: 0;
      }

      .content {
    
        font-size: 14px;
        height: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }

      .button {
    
        text-align: right;
      }

      .button button {
    
        height: 35px;
        line-height: 35px;
        width: 80px;
      }
    </style> </head> <body> <div class="alert"> <div class="title">  Tips ： <span>X</span> </div> <div class="content">  Content of tips ... </div> <div class="button"> <button> determine </button> </div> </div> <button id="btnShow"> Show pop ups </button> <button id="no_btn"> Cancel </button> </body> <script> var btnShow = document.querySelector('#btnShow') var noBtn = document.querySelector('#no_btn') var alert = document.querySelector('.alert') btnShow.addEventListener('click',show) function show(){
    
        alert.style.display = 'block'    
          var h = window.innerHeight
          var w = window.innerWidth

          var rules = window.getComputedStyle(alert)
          var selfW = rules.width
          var selfH = rules.height
          
          var left = (w -parseFloat(selfW) )/2
          var top = (h -parseFloat(selfH) )/2

          alert.style.left = left + 'px'
          alert.style.top = top + 'px'
          alert.style.position =  'absolute';
      }

      
      noBtn.addEventListener('click',function(){
    
        alert.removeAttribute('style')             
      })