Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.03.2020, 17:37
Аспирант
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 86

Как сделать ссылку закрывающую модальное окно?
Здравствуйте. Помогите добавить ссылку закрывания модального окна, которая будет располагаться внутри самого окна.

<button onclick="show('block')">Открыть окно</button>
 
<div onclick="show('none')" id="wrap9"></div>
<div id="window9">  
Содержимое окна
</div>


function move() {
  slides[index].style.opacity = "";
  slides[index].style.zIndex = "";
  index = (index + dir + len) % len;
  slides[index].style.opacity = 1;
  slides[index].style.zIndex = 1;
  var article = slides[index].getElementsByTagName('article')[0];
  document.getElementById('window9').style.width = article.offsetWidth+'px';
  document.getElementById('window9').style.height = article.offsetHeight+'px';
  index < len - 1 && (timer = window.setTimeout(move, 1000));
}
 
function show(state) {
  if (state === "block") {
    timer = window.setTimeout(move, 0);
  } else {
    clearTimeout(timer);
  }
  document.getElementById('window9').style.display = state;
  document.getElementById('wrap9').style.display = state;
  
}


Код:
 #wrap9{
        display: none;
        opacity: 0.5;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 1);
        z-index: 100;
        overflow: auto;
    }
    
    #window9{
        width: 500px;
        height: 300px;
        margin: auto;
        display: none;
        background: #fff;
        border: 1px solid #365E97;
        z-index: 200;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 15px 30px 30px 30px;
        vertical-align:middle;
        -webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
        box-shadow:0 5px 15px rgba(0,0,0,.5);
    }
Ответить с цитированием
  #2 (permalink)  
Старый 26.03.2020, 06:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,772

Сообщение от Lefseq
Помогите добавить ссылку закрывания модального окна, которая будет располагаться внутри самого окна.
Это не модальное окно...
Как вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
-->
<style type='text/css'>
#wrap9{
	display: none;
	opacity: 0.5;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 1);
	z-index: 100;
	overflow: auto;
}
#window9{
	width: 500px;
	height: 100px;
	margin: auto;
	display: none;
	background: #fff;
	border: 1px solid #365E97;
	z-index: 200;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 15px 30px 30px 30px;
	vertical-align:middle;
	-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
	box-shadow:0 5px 15px rgba(0,0,0,.5);
}
#off {
	position: absolute;
	top: 2px;
	right: 5px;
	cursor: pointer;
}
</style>
<script type='text/javascript'>
function show(state) {
	var o=document.getElementById('window9');
	o.style.display = state;
	document.getElementById('wrap9').style.display = state;
	if (!o.querySelector('#off')) {
		var e=document.createElement('a');
		e.id='off';
		e.innerHTML='x';
		e.onclick=function(){
			show('none');
		};
		o.appendChild(e);
	};
};
</script>
</head>
<body>
<button onclick="show('block')">Открыть окно</button>
<div onclick="show('none')" id="wrap9"></div>
<div id="window9">  
Содержимое окна
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 26.03.2020, 19:22
Аспирант
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 86

ksa,
Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать параметр в модальное окно? andrey8501 Общие вопросы Javascript 6 11.10.2019 20:44
Как создать модальное окно что бы оно выводило фрейм olehpdatu Элементы интерфейса 11 22.03.2015 07:46
Как сделать всплывающее окно по центру экрана? jslgogo Общие вопросы Javascript 8 26.08.2014 08:18
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 15:59
как сделать ссылку у активной img IggyTot Элементы интерфейса 36 10.08.2012 12:05