アイデア：
•マスクを作成し、他の要素をカバーできることを確認するためにマスクのスタッキング順序を設定します
位置：絶対; TOP：0;左：0;表示：なし;バックグラウンドカラー：RGBA（9、9、9、0.63）;幅：100％;高さ：100％; Z-Index：1000; •マスク幅のコンテンツの背景色と表示形式を設定します：50％;テキストアリグイン：中心;背景：#ffffff; border-radius：6px;マージン：100px auto; line-height：30px; z-index：10001; •バインディングイベント、マスクのディスプレイ属性関数showmodel（）を動的に切り替えます{document.getElementbyId（ 'mymodel'）。style.display = 'block';} function closemodel（）{document.getelementbyid（ 'mymodel'）。style.display = 'none';}注：マスクは絶対に配置する必要があり、幅と高さはページ全体を占める必要があり、スタッキング順序は大きくする必要があります。
ソースコード
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> mask </title> <style> .container {width：900px; margin：50px auto; text-align：center;} RGBA（9、9、9、0.63）;幅：100％;高さ：100％; z-index：1000;}。モデルコンテンツ{幅：50％;テキストアリグイン：center：#ffffff; border-radius：6px;マージン：マージン：100px auto; line-height：30px; z-index：10001; </< onclick = "showmodel（）">ポップアップマスク</button> <div id = "mymodel" onclick = "closemodel（）"> <div> <p>こんにちは、私はコンテンツ~~ </p> <p> <ボタンid = "closemodel" onclick = "closemodel（）" {document.getElementById（ 'mymodel'）。style.display = 'block';} function closeModel（）{document.getElementById（ 'mymodel'）。style.display = 'none';} </script> </body> </html>上記は、エディターが紹介したJavaScriptマスク（モデル）関数の単純な実装コードです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！