jquery实现简易弹窗组件

jquery实现简易弹窗组件

<!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>
      button {
     
        padding: 10px 50px;
        background-color: #c51a1b;
        border-color: #c51a1b;
        outline: none;
        border-radius: 4px;
        text-align: center;
        color: #fff;
      }
      button:hover {
     
          background-color: #900;
          transition: all .2s;
      }
      .show {
     
          display: block;
      }
      .hide {
     
          display: none;
      }
      .cen {
     
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: rgba(0,0,0,0.5);
          z-index: 123;
      }
      .modal-alert-content {
     
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 124;
          height: 100px;
          width: 100px;
          background-color: yellow;
      }
      .close {
     
          position: absolute;
          top: 5px;
          right: 5px;
          color: #c51a1b;
          font-size: 20px;
          z-index: 125;
          cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button>弹窗</button>
    <div class="modal-alert hide">
        <div class="cen"></div>
        <div class="modal-alert-content">
            我是弹窗组件的内容
            <div class="close">×</div>
        </div>
    </div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        $('button').click(function() {
     
            $('.modal-alert').removeClass('hide').addClass('show')
        })
        $('.cen').click(function() {
     
            $('.modal-alert').addClass('hide')
        })
        $('.close').click(function() {
     
            $('.modal-alert').addClass('hide')
        })
    </script>
  </body>
</html>

你可能感兴趣的:(弹窗,javascript,jquery)