Форум

Pashok(one) · #1 (**permalink**) 05.01.2013, 19:21

Нужно сделать открытие popup окна по клику на ссылку
Помоги верстаю шаблон но без этого элемента совсем ничего не получится
Js совсем не знаю пытаюсь учить

Pashok(one) · #2 (**permalink**) 05.01.2013, 19:41

помогите пожалуйста

Deff · #3 (**permalink**) 05.01.2013, 19:52

Pashok(one),
1. Новая HTML вкладка - страница ? или просто popup со своим контентом? Или ?

Pashok(one) · #4 (**permalink**) 05.01.2013, 20:25

Всплывающее popup окно (не страница) с контентом (в моём случае новости)

Deff · #5 (**permalink**) 05.01.2013, 20:55

Сообщение от Pashok(one)

Всплывающее popup окно (не страница) с контентом (в моём случае новости)

<!DOCTYPE>
<html>
<head>
<script type="text/javascript">
function WinOp(str)
{
var msg = new String("");
msg = '<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1251\" /><link rel="stylesheet" type="text/css" href="http://javascript.ru/clientscript/vbulletin_css/style-81884d78-00003.css" id="vbulletin_css" /><title>Что -то</title>'
msg+= "<body><div id=\"pun\" class=\"punbb\"><div id=\"pun-main\" class=\"main\">"
msg+="Тут контент"+str;
msg+="</div></div></body></html>";
popup = window.open("", "", "height=300, width=700, top=300, left=300, scrollbars=1")
popup.document.write(msg)
popup.document.close()
return false
}

var Conten_000='<div>sd;jfl;lsdjf;lsdjfl;sdjf;lsdjf;ljsdfl;jsd;lfj\
afjkajfaj;fjsa;dlfjlsdjfl;sdfsdf\
<div>';
</script>

<a href="#" onclick="WinOp(Conten_000);" title="Показать">Показать</a>


</body>
</html>

Pashok(one) · #6 (**permalink**) 05.01.2013, 22:03

Да но я кажется не так выразился, мне нужно чтобы всплыло окно
а когода оно открылось экран закрыл блок <div class='block'style='wdth:100%;height:100%;z-index:10;'><div class='tt'>тест<div id='close'>x</div></div></div>

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

window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Открыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Закрыть';
	}
}
<a id="toggler" href="#">Открыть</a>
<div id="box" style="display: none;">Отображаемый блок</div>

Или при клике мимо экрана

Deff · #7 (**permalink**) 06.01.2013, 01:20

Сообщение от Pashok(one)

Да но я кажется не так выразился, мне нужно чтобы всплыло

<!DOCTYPE>
<html>
<head>
<style>
body {
 margin:0;
 width:100%;
  height:100%;
}
#Wrapp,#Wrapp2 {
 top:0;
  left:0;
 position:fixed;
 background-color:#000;
 opacity: 0.74;
 width:100%;
 height:100%;
 z-index:10000;
}
#tt,#tt2 {
  position:relative;
  background-color:#fff;
  width:200px;
  padding:12px;
  height:100px;
  margin:20% auto auto auto;
  border:red solid 1px;

}
div.close {
  cursor:pointer;
  position:absolute;
  font-weight:700;
  text-shadow:#000 1px 1px 0;
  color:red;
  right:7px;
  top:2px;
}
</style>

<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>
</head>
<body>



<div id="Wrapp" style="display:none">
<div id='tt'><div class="close" onclick="openbox('Wrapp')">x</div>

     тест 1111111111dd

  </div></div>
<a href="#" onclick="openbox('Wrapp');return false;" >Открыть(2)</a>

<pre>


</pre>

<div id="Wrapp2" style="display:none">
<div id='tt2'><div class="close" onclick="openbox('Wrapp2')">x</div>

     тест 22222222dd

  </div></div>
<a href="#" onclick="openbox('Wrapp2');return false;" >Открыть(2)</a>



</body>
</html>

Pashok(one) · #8 (**permalink**) 06.01.2013, 04:49

Огромное спасибо!!, а возможно добавить тоже самое второй раз или другой id в этот код? мне нужно чтобы второй такой всплывающий блок также открывался.

Deff · #9 (**permalink**) 06.01.2013, 05:00

Сообщение от Pashok(one)

а возможно добавить тоже самое второй раз

Поправил

Pashok(one) · #10 (**permalink**) 06.01.2013, 05:36

Спасибо, а возможно сделать закрытие при клике на фон (Wrapp), но чтобы он не закрывал при клике на всё что в нутри, желательно не переписывая код, я с ним ужастно намучился...

Форум

Справочник

Discord чат

Курсы javascript