JS를 사용하여 간단한 팝업 상자를 구현하는 방법

이 기사는 주로 JS를 사용하여 미니멀한 팝업 상자를 구현하는 방법을 분석합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 아래 에디터와 함께 살펴보겠습니다.

• 두 개의 P가 팝업박스를 이루고 있습니다. 두 P의 수준은 형제애입니다.

• 첫 번째 p는 뒤에 있는 내용을 차단하는 것

• 두 번째 p는 팝업 상자의 실제 내용을 표시하는 것

  HTML 부분

• 으아악

• CSS 부분

• !-- 这个是用来遮罩的 --><p id="modelp"></p><!-- 这个是用来展示弹框内容的 --><p id="model">
  <p style="float: right;height: 20px; width: 20px;border-radius: 50%; border: 2px solid red;text-align: center;" onclick="closeModel()">
          X    </p>
      弹出窗口</p>

• JavaScript 부분

• // 遮挡部分CSS#modelp {        height: 100%;
          width: 100%;
          // 页面定位到最上面
          position: absolute;
          top:0;
          left:0;
          background: silver;
          // 透明度这样能看到后面的内容效果真实一些
          opacity:0.8;
          // 遮挡级别最好高一些，防止别的内容会突然出现在你的弹出层上面，这就尴尬了。
          z-index: 99;
      }    // 弹出框内容CSS
      #model {        width: 300px;
          height: 200px;
          background: #959FA9;
          border-radius: 10px;
          padding: 15px;
          position: absolute;
          top: 200px;
          left: 42%;
          z-index: 99;
      }

위 내용은 JS를 사용하여 간단한 팝업 상자를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!