Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 22.04.2012, 15:23
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

спасибо Octane я хотел реально что-то типа такого
Ответить с цитированием
  #12 (permalink)  
Старый 03.02.2016, 07:06
Интересующийся
Отправить личное сообщение для FeelUs Посмотреть профиль Найти все сообщения от FeelUs
 
Регистрация: 09.01.2016
Сообщений: 23

мне дополнительно понадобилась возможность рекурсивного вызова и автоматическая подгонка ширины и выравнивание по центру. По этому немного переделал код Octan'а
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
	<style>
		body{
			padding:10px;
			margin:0px;
		}
		.shadow {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000;
			opacity: 0.3;
		}
		.common_dialog {
			position: fixed;
			left: 50%;			/*по горизонтали*/
			transform: translateX(-50%);
			max-width: 95%;		/*по вертикали*/
			top: 5%;
			box-sizing: border-box;	/*что бы padding не влиял на высоту*/
			max-height: 90%;
			overflow : auto;	/*полосы прокрутки*/
			background: #fff;
			border: 1px solid #000;
			padding: 10px;		
		}
	</style>
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<script>
function Alert() {
	this._$base = $('<div><div class="shadow"></div></div>');
}
Alert.prototype = {
	constructor: Alert,
	show: function ($element) {
		$element.addClass("common_dialog");
		this._$base.append($element).appendTo($("body"));
	},
	close: function () {
		this._$base.remove();
	}
};
function my_open(){
	var alert = new Alert;
	$element = $('<div><h2>Привет</h2><p>некоторый текст Lorem ipsum dolor set amit consectetur </p><br>\
<button id="onclose">close</button>\
<button onclick="my_open()">open</button>\
</div>');
	$element.find("#onclose").click(alert.close.bind(alert));
	alert.show($element);
}

</script>
	<button onclick="my_open()">open</button>
</body>
</html>

правда с использованием jQuery

Последний раз редактировалось FeelUs, 04.02.2016 в 07:16. Причина: нашел способ выравнивать по центру на CSS
Ответить с цитированием
  #13 (permalink)  
Старый 04.02.2016, 09:35
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Коментарии в модальном окне
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Диалоговое окно выбора файла Saboth Элементы интерфейса 6 14.02.2012 16:29
диалоговое окно js Aplik Общие вопросы Javascript 1 16.10.2011 20:21
Диалоговое окно внутри контейнера с overflow:hidden debugx (X)HTML/CSS 1 22.08.2011 13:06
Диалоговое окно в центре экрана. Как в твиттере. IvanZotov jQuery 1 23.06.2011 18:48