изменение display блока по клику
На ссылке висит функция.
<a href="javascript:attribute()">Звонок</a>По клику на нее появляется и исчезает блок div#cl с формой. Как мне добавить в эту функцию событие, что бы при нажатии мимо ссылки и блока div c формой, div исчезал бы. И можно ли как-то убрать функцию из ссылки? Хотелось бы обращаться к id <a href="#" id="zvonok">Звонок</a>
function attribute(){
var form = document.getElementById('cl');
if(form.style.display == 'none'){
form.style.display = 'block';
}else{
form.style.display = 'none';
}
|
$(function () {
$('body').click(function() {
$('div.popup'). hide();
$('#overlay').remove('#overlay');});
$('a.show_popup').click(function () {
$('div.'+$(this).attr("rel")).fadeIn(500);
$("body").append("<div id='overlay'></div>");
$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
return false;
});
$('a.show_popup').click(function (event) {
event.stopPropagation();
$(this).parent().fadeOut(100);
$('#overlay').remove('#overlay');
return false;
});};
|
без jquery не обойтись?
|
|
Закрытие модального окна по клику мимо него
bubanay,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#cl.show { visibility: visible; opacity: 1; }
#cl{
background-color: #D2B48C;
border: 3px solid #8B4513;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
width: 300px;
height: 323px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
border-radius: 11px;
}
</style>
<script>
function init()
{
var form = document.getElementById('cl'), tel = document.getElementById('zvonok');
document.onclick = function(event) {
var elem = event.target;
event.target === tel && form.classList.toggle("show");
if (elem === form || form.contains(elem) || event.target === tel) return false;
form.classList.remove("show");
}
}
window.onload = init;
</script>
</head>
<body>
<a href="#" id="zvonok">Звонок</a>
<div id="cl"> <form action="http://">
<h4>test</h4>
</form>
</div>
</body>
</html>
|
а если на странице не 1 открывающийся блок, а несколько? Каждый из которых должен открываться по своей ссылке
<body> <a href="#" id="zvonok">Звонок</a> <div id="cl"> <h4>test</h4> </div> <a href="#" id="zvonok2">Звонок2</a> <div id="cl2"> <h4>test2</h4> </div> <a href="#" id="zvonok3">Звонок3</a> <div id="cl3"> <h4>test3</h4> </div> </body> Весь день пытался решить эту задачу. Как сделать универсально? Как такие задачи вообще правильно решаются? |
Цитата:
|
Открывашка 214 для модальных окон
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.cl.show { visibility: visible; opacity: 1; }
.cl{
background-color: #D2B48C;
border: 3px solid #8B4513;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
width: 300px;
height: 323px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 999999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
border-radius: 11px;
}
</style>
<script>
function init() {
var form = document.querySelectorAll('.cl'),
tel = document.querySelectorAll('.zvonok'),
open;
document.onclick = function(event) {
var elem = event.target;
if (open && (elem === open || open.contains(elem))) return false;
if (elem.classList.contains('zvonok')) {
for (var i = 0; i < tel.length; i++) {
if (elem === tel[i]) break
}
if (open && open !== form[i]) open.classList.remove("show");
open = form[i];
open.classList.toggle("show");
return false;
}
open && open.classList.remove("show");
}
}
window.onload = init;
</script>
</head>
<body>
<a href="#" class="zvonok" >Звонок</a>
<div class="cl">
<h4>test</h4>
</div>
<a href="#" class="zvonok">Звонок2</a>
<div class="cl">
<h4>test2</h4>
</div>
<a href="#" class="zvonok">Звонок3</a>
<div class="cl">
<h4>test3</h4>
</div>
</body>
</html>
|
рони огромное спасибо вам за помощь!
Попробовал использовать в Wordpress упрощённный код из вашего поста #5. Однако не получается Я уже упоминал в соседней теме, что пытаюсь заставить открываться и закрываться в меню форму поиска, как в меню на этом сайте: http://algolux.com/news/. При этом в моём случае плавная анимация не нужна, и мне теперь уже безразлично, что будет использоваться - чистый js или jquery. Лишь бы работало. Сейчас выдрал из своего тестового сайта http://cosmetic.besaba.com/ кусок меню с текстовой кнопкой "Поиск" и формой поиска. Код вместе с вашим скриптом из поста #5, в который я подставил свои классы, привожу ниже. Для наглядности, в коде ниже и на сайте, чтобы видеть как выглядит форма поиска, свойство visibility: hidden в диве box закомментировано. Но убираю комментирование, форма становится невидимой, тыкаю в Поиск и ничего не происходит.
!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a.search-link {
cursor: pointer;
text-transform: uppercase;
/* font-family: IcoMoon; */
}
.box {
font-size: 0;
left: 100px;
padding: 10px;
margin-left: 10px;
position: absolute;
right: 0;
text-align: right;
width: 300px;
z-index: 99999;
/* visibility: hidden; */
}
.box.show { visibility: visible; opacity: 1; }
ul{
list-style-type: none;
}
li{
display: inline-block;
margin: 0 2.85714rem 0 0;
position: relative;
}
</style>
<script>
function init()
{
var form = document.getElementById('box'), tel = document.getElementById('search-link');
document.onclick = function(event) {
var elem = event.target;
event.target === tel && form.classList.toggle("show");
if (elem === form || form.contains(elem) || event.target === tel) return false;
form.classList.remove("show");
}
}
window.onload = init;
</script>
</head>
<body>
<ul>
<li>
<a id="main-nav-search-link" class="search-link">Параллакс</a>
</li>
<li>
<a id="main-nav-search-link" class="search-link">Поиск</a>
<div class="box">
<form class="menu-search-form" action="http://cosmetic.besaba.com/" method="get">
<p>
<input id="s" class="text" type="text" onblur="if (this.value == '') {this.value = 'Кто Ищет, Тот Найдет !';}" onfocus="if (this.value == 'Кто Ищет, Тот Найдет !') {this.value = '';}" name="s" value="Кто Ищет, Тот Найдет !">
<input id="searchsubmit" class="my-wp-search" type="submit" value="Искать">
</p>
</form>
</div>
</li>
</ul>
</body>
</html>
Нашёл ещё один ваш вариант: http://javascript.ru/forum/jquery/54...tml#post362759. Но там лишний код для моего случая и navbar bootstrap используется. |
rikitiki,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a.search-link {
cursor: pointer;
text-transform: uppercase;
/* font-family: IcoMoon; */
}
#box {
font-size: 0;
left: 100px;
padding: 10px;
margin-left: 10px;
position: absolute;
right: 0;
text-align: right;
width: 300px;
z-index: 99999;
visibility: hidden;
}
#box.show { visibility: visible; opacity: 1; }
ul{
list-style-type: none;
}
li{
display: inline-block;
margin: 0 2.85714rem 0 0;
position: relative;
}
</style>
<script>
function init()
{
var form = document.getElementById('box'), tel = document.getElementById('search-link'), submit = document.getElementById('searchsubmit');
document.onclick = function(event) {
var elem = event.target;
elem === tel && form.classList.toggle("show");
if(elem === submit) return true;
if (elem === form || form.contains(elem) || event.target === tel) return false;
form.classList.remove("show");
}
}
window.onload = init;
</script>
</head>
<body>
<ul>
<li>
<a id="main-nav-search-link" class="">Параллакс</a>
</li>
<li>
<a id="search-link">Поиск</a>
<div id="box">
<form class="menu-search-form" action="http://cosmetic.besaba.com/" method="get">
<p>
<input id="s" class="text" type="text" onblur="if (this.value == '') {this.value = 'Кто Ищет, Тот Найдет !';}" onfocus="if (this.value == 'Кто Ищет, Тот Найдет !') {this.value = '';}" name="s" value="Кто Ищет, Тот Найдет !">
<input id="searchsubmit" class="my-wp-search" type="submit" value="Искать">
</p>
</form>
</div>
</li>
</ul>
</body>
</html>
|
| Часовой пояс GMT +3, время: 12:43. |