заявление
Чтение этой статьи требует определенного базового HTML, CSS и JavaScript
дизайн
Идея достижения эффекта всплывающего уровня очень проста: скрыть контент для отображения сначала, и отобразить первоначально скрытый содержимое после запуска определенного условия (например, нажатие кнопки).
выполнить
<! Doctype html> <html> <head> <Title> Ondow Object </title> <meta charset = "utf-8"> </head> <body> <a href = "http://www.baidu.com"> baidu </a> <button = "inpate" open "open"> oppend open open open open open poine style <div-stype nea stice style style stice style stice: div-nea yep sty stice style stype stice stype sty stice stype stice stype stice stype stice. LightBlue; граница: 1px Solid Green; " id = "toast"> <!-Установите атрибут отображения, чтобы не скрывать контент-> <p> Это содержимое слоя всплывающего окна </p> <button Type = "Кнопка" id = "Закрыть"> Закрыть слой всплывающего окна </button> </div> <script type = "text/javascript"> vartoast = DecovermelementByid ("toast"); document.getElementbyId ("open"). onclick = function (e) {<!-определить событие Click для отображения скрытого контента-> toast.style.display = "block"; toast.style.position = "fixed"; var winwidth = window.innerwidth; var winheight = window.innerheight; var targetwidth = toast.offsetwidth; var targetheight = toast.offsetheight; toast.style.top = (winheight - targetheight) / 2 + "px"; toast.style.left = (WinWidth - TargetWidth) / 2 + "px"; } document.getElementById ("close"). OnClick = function (e) {<!-скрыть отображаемый контент снова-> toast.style.display = "none"; } </script> </body> </html>Эффект отображения выглядит следующим образом:
Но мы можем заметить, что после появления скрытого контента мы все равно можем ввести страницу Baidu по ссылке. Чтобы это не произошло, мы можем предоставить слой маски, чтобы охватить все исходное содержание страницы. Код заключается в следующем:
<!DOCTYPE html><html><head> <title>Window object</title> <meta charset="utf-8"></head><body><a href="http://www.baidu.com">Baidu</a><button type="button" id="open">Open the pop-up layer</button><div id="cover" style="display: Нет; позиция: фиксированная; ширина: 100%; высота: 100%; сверху: 0px; слева: 0px; фон: серый; "> <!-маскируйте фон через слой маски-> <div style =" founke: lightblue; граница: 1px solid green; " id = "toast"> <!-Установите атрибут отображения, чтобы не скрывать контент-> <p> Вот содержимое слоя всплывающего окна </p> <button Type = "кнопка" id = "Закрыть"> Закройте всплывающий слой </button> </div> </div> <script type = "text/javascript"> varoast = document.getElementbyid ("toast"); var cover = document.getElementbyId ("cover"); document.getElementById ("open"). OnClick = function (e) {<!-определить событие Click для отображения скрытого контента-> cover.style.display = "block"; toast.style.position = "fixed"; var winwidth = window.innerwidth; var winheight = window.innerheight; var targetwidth = toast.offsetwidth; var targetheight = toast.offsetheight; toast.style.top = (winheight - targetheight) / 2 + "px"; toast.style.left = (WinWidth - TargetWidth) / 2 + "px"; } document.getElementById ("close"). onclick = function (e) {<!-скрыть отображаемый контент снова-> Cover.style.display = "none"; } </script> </body> </html>Это снова следующий результат тестирования, как показано на рисунке ниже:
Суммировать
Приведенный выше контент просто реализует эффект всплывающего окна, но, добавляя больше кода, на этой основе могут быть реализованы более сложные функции.
Приведенный выше простой пример использования JavaScript для достижения эффекта всплывающего окна-это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.