Идеи:
• Создайте маску, установите порядок укладки маски, чтобы убедиться, что другие элементы могут быть покрыты
Положение: абсолют; вверху: 0; слева: 0; дисплей: нет; • Установите цвет фона и формат отображения контента в ширине маски: 50%; текстовой авария: центр; фон: #ffffff; граница-радиус: 6px; маржа: 100px Auto; линейная высота: 30px; z-index: 10001; • Событие привязки, динамически переключить функцию атрибута отображения ShowModel () маски {document.getElementById ('myModel'). Style.display = 'block';} function rolsemodel () {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;}#myModel {Положение: Ablision: 0; rgba(9, 9, 9, 0.63);width: 100%;height: 100%;z-index: 1000;}.model-content {width: 50%;text-align: center;background: #ffffff;border-radius: 6px;margin: 100px auto;line-height: 30px;z-index: 10001;}</style></head><body><div><button onclick = "showmodel ()"> всплывающая маска </button> <div id = "mymodel" onclick = "rolsemodel ()"> <div> <p> Привет, я содержание ~~ </p> <p> <button id = "neckemodel" onclick = "scloeModel ()"> close </ptunt> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> div> <clipmodel () ") {document.getElementById ('myModel'). style.display = 'block';} function closeModel () {document.getElementById ('myModel'). style.display = 'none';} </script> </body> </html>Выше приведено простой код реализации функции маски JavaScript (модель), введенной вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!