Форум

Lefseq · #1 (**permalink**) 25.03.2020, 18:37

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

<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);
    }

ksa · #2 (**permalink**) 26.03.2020, 07:43

Сообщение от 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>

Lefseq · #3 (**permalink**) 26.03.2020, 20:22

ksa,
Спасибо

Форум

Справочник

Discord чат

Курсы javascript