ホームページ  >  記事  >  ウェブフロントエンド  >  JSを使用して簡単なポップアップボックスを実装する方法

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

零到壹度
零到壹度オリジナル
2018-03-21 16:29:303395ブラウズ

この記事は主に 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。