Форум Сайтостроение Веб-строительство

Модальное окно

sema_87
На сайте с 28.08.2009
Offline
249
sema_87
650

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

Uh-Oh We're In Trouble, Something's Come Along And It's Burst Our Bubble!
S
На сайте с 13.10.2014
Offline
171
silicoid
#1

Jquery UI

http://jqueryui.com/dialog/#modal-confirmation

просто отключаете в скрипте ненужный функционал, вроде кнопок закрытия и все. профит

маленький пример ниже 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery UI Dialog - Modal confirmation</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

<script>

	$(function() {

		$( "#dialog-confirm" ).dialog({

				height:200, 			// высота

				width: '30%',			// ширина

				resizable: false, 		// Запрещаем тянуть

				draggable: false, 		// Запрещаем двигать

				modal: true, 			// говорим скрипту, что это модальник

				closeOnEscape: false, 	// Отмена закрытия по эскейпу

				create: function( event, ui )

						{ 

							$('.ui-dialog-titlebar button').remove(); // удаление кнопки закрытия из шапки. 

						} 

		});

	});

</script>

</head>

<body>

<div id="dialog-confirm" title="Empty the recycle bin?">

<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>

</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

</body>

</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий