igorusha
Новичок
Дата регистрации:
15.05.2015 23:23:54
Сообщений: 6
Подскажите, пожалуйста, как реализовать эффект размытия фона всей страницы при открытии всплывающего окна к коду всплыв. окна?
<!DOCTYPE HTML>
<html>
<head>
<title>Всплывающее окно</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--/* Всплывающее окно */ -->
#parent_popup {
background-color: rgba(0, 0, 0, 0.5);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 500px;
margin: 20% auto;
padding: 5px 5px 5px 5px;
border: 7px solid blue;
position: relative;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="parent_popup">
<div id="popup">
<center>
Содержимое всплывающего окна
Содержимое всплывающего окна
Содержимое всплывающего окна
Содержимое всплывающего окна
Содержимое всплывающего окна
Содержимое всплывающего окна
</center>
</div>
</div>
<script type="text/javascript">
var delay_popup = 5000;
setTimeout("document.getElementById('parent_popup'
.style.display='block'", delay_popup);
</script>
<script type="text/javascript">
var delay_popup = 30000;
setTimeout("document.getElementById('parent_popup'.style.display='none'", delay_popup);
</script>
</body>
</html>
disabler
Новичок
Дата регистрации:
30.10.2015 06:41:06
Сообщений: 1
как правильно сделать такое же окно, только для корзины при оформлении заказа?
igorusha
Новичок
Дата регистрации:
15.05.2015 23:23:54
Сообщений: 6
Если ты имел ввиду чтобы при нажатии, то код приведён ниже:
<!DOCTYPE html>
<head>
<title>Создаем всплывающее окно при нажатии на ссылку с помощью CSS3 и немного javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
background: gray;
}
<!--/* Всплывающее окно */ -->
#parent_popup {
background-color: rgba(0, 0, 0, 0.3);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 470px;
margin: 6% auto;
padding: 20px;
border: 6px solid blue;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8);
}
</style>
</head>
<body>
<div id="parent_popup">
<div id="popup">
<iframe frameborder="0" style="width: 450px; height: 450px;" src="files/basket.php" scrolling="no"></iframe>
<a class="close" title="Закрыть" onclick="openbox('parent_popup'.style.display='none';">X</a>
</div>
</div>
<a href="#" onclick="openbox('parent_popup';return false;" style="color: #fff; font-family: Times New Roman; font-size: 13pt;"><b>В корзину</b></a>
<script type="text/javascript">
function openbox(id,tt) {
var div = document.getElementById(id);
var tt_div = document.getElementById(tt);
if(div.style.display == 'block' {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
</script>
</body>
</html>вместо картинки, которой нет, должна быть скобка " ) "
видимо есть некоторые тех. неполадки на странице
