初学js BOM 实现窗口居中

最新推荐文章于 2023-12-13 11:09:32 发布

A-linWeb

最新推荐文章于 2023-12-13 11:09:32 发布

阅读量216

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/qq_48046110/article/details/107967023

版权

<!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">
        提示：

        <span>X</span>
      </div>
      <div class="content">
        提示的内容...
      </div>
      <div class="button">
        <button>确定</button>
      </div>
    </div>

    <button id="btnShow">显示弹出框</button>
    <button id="no_btn">取消</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')             
      })