В этой статье описывается метод реализации всплывающих рамков слоя маски от JS. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Вчера на веб-сайте компании потребовалось всплывающее окно, чтобы предоставить некоторую информацию, и попросил меня написать всплывающий код JS и всплывающее окно HTML вместе, просто позвоните, где он вам понадобится.
Я не скажу так много, просто загрузите код, и я чувствую, что определенно будут проблемы с совместимостью. Укажите, пожалуйста, если вы это видите:
Скопируйте код следующим образом: <style>
#H-dialog {display: none; положение: абсолютное; z-index: 999999; ширина: 400px; высота: Auto; фоновый цвет: #fff;}
#H-dialog .close {float: right; размер шрифта: 30px; маржинальный: 10px; margin-top: 5px; cursor: pointer;}
#H-dialog .title {высота: 40px; прокладки-лето: 10px; размер шрифта: 20px; высота линии: 40px;}
#H-dialog #msgcont {height: 36px; Запас: 30px 0 50px; прокладки-лето: 65px; размер шрифта: 25px; линейная-высота: 36px; вертикальный аровка: средний; Фон: url (../ Images/ui_alert.png) без повторного перепорачивания 20px 50%;}
</style>
<div id = "h-dialog">
<a onclick = "PopupClose (this)"> × </a>
<div> Совет </div>
<div id = "msgcont"> content </div>
</div>
<script type = "text/javascript">
// заблокировать фона экрана
function lockscreen () {
var clienth = document.body.offsetheight; // высота тела
var clientW = document.body.offsetwidth; // ширина тела
var doch = document.body.scrollheight; // высота браузера
var docw = document.body.scrollwidth; // Ширина браузера
var bgw = clientw> docw? ClientW: DOCW; // Получить действительную ширину
var bgh = clienth> Doch? Клиент: Коул; // Получить действительный высокий
var blackbg = document.createElement ("div");
blackbg.id = "blackbg";
blackbg.style.position = "Absolute";
blackbg.style.zindex = "99999";
blackbg.style.top = "0";
blackbg.style.left = "0";
blackbg.style.width = bgw+"px";
blackbg.style.height = bgh+"px";
blackbg.style.opacity = "0,4";
blackbg.style.backgroundcolor = "#333";
document.body.appendchild (blackbg);
}
// Кнопка Close Event
Функция opupclose (el) {
var blackbg = document.getElementById ("BlackBG");
blackbg && document.body.removechild (blackbg);
el.parentnode.style.display = "none";
}
// происходят
Функция Autoclose (id) {
id = id || "H-dialog";
var blackbg = document.getElementById ("BlackBG");
var objdiv = document.getElementByid (id);
settimeout (function () {
blackbg && document.body.removechild (blackbg);
objdiv.style.display = "none";
}, 2000);
}
/**
*Функция: всплывающая информация
* Параметр 1: Содержание информации о приглашении
* Параметр 2: Статус информации о приглашении по умолчанию составляет 0. Информация о приглашении - 1. Информация о успехе равен
* Параметр 3: Идентификатор всплывающего Div, по умолчанию "h-dialog"
* Параметр 4: Идентификатор содержимого всплывающего окна, по умолчанию "msgcont"
**/
функция Showmsg (msg) {
msg = msg || «Пожалуйста, повторите переопределение»;
var status = аргументы [1] || 0,
popupid = аргументы [2] || "H-Dialog",
ContentId = аргументы [3] || "msgcont";
lockscreen ();
// фактическая высота и ширина экрана
var pagewidth = window.innerwidth;
var pageHeight = window.innerheight;
if (typeof pagewidth! = "номер") {
if (document.compatmode == "css1compat") {
pagewidth = document.documentelement.clientWidth;
pageHeight = document.documentelement.clientHeight;
} еще {
pagewidth = document.body.clientwidth;
PageHeight = Document.Body.ClientHeight;
}
}
// Свиток имеет высоту и ширину
var scrollleft = window.document.documentelement.scrollleft;
var scrolltop = 0;
if (typeof window.pageyoffset! = 'не определен') {
scrolltop = window.pageyoffset;
} else if (typeof window.document.compatmode! = 'undefined' &&
window.document.compatmode! = 'backcompat') {
scrolltop = window.document.documentelement.scrolltop;
} else if (typeof window.document.body! = 'undefined') {
scrolltop = window.document.body.scrolltop;
}
var div_x = (pagewidth - 400) / 2 + scrollleft;
var div_y = (pageHeight - 200) / 2 + scrolltop;
var objdiv = document.getElementById (POPUPID);
if (status) {
document.getElementById (contentId) .Style.background = "url ($ root/issets/images/ui_success.png) без повторного перепорачивания 20px 50%";
}
document.getElementbyId (contentId) .innerHtml = msg;
objdiv.style.display = "block";
objdiv.style.left = div_x + "px";
objdiv.style.top = div_y + "px";
Автоклоз (POPUPID);
}
</script>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.