JSを使用して簡単なポップアップボックスを実装する方法

この記事は主に JS を使用してミニマリストのポップアップ ボックスを実装する方法を分析しています。必要な方はぜひ参考にしてください。以下のエディターで見てみましょう。

• ポップアップ ボックスを形成する 2 つの p があります。 2つのPのレベルは兄弟愛です。

• 1つのpは背後のコンテンツをブロックすることです

• 2番目の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 中国語 Web サイトの他の関連記事を参照してください。