Javascript.RU

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

Нужно создать диалоговое окно
Всем доброго времени суток нужно создать диалоговое окно вот только проблема я читал что это делается спомощью Jquery, но я не знаю Jquery я знаю лишь простой javascript.В общем мне надо что-бы кто-нибудь мне объяснил как его сделать (диалоговое окно типа alert).Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 21.04.2012, 19:05
Аспирант
Отправить личное сообщение для Caminante Посмотреть профиль Найти все сообщения от Caminante
 
Регистрация: 23.03.2012
Сообщений: 40

А разве на "простом" JavaScript нельзя создать диалоговое окно типа alert? Или нужны эффекты плавного появления и т.п.?
Ответить с цитированием
  #3 (permalink)  
Старый 21.04.2012, 19:09
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

А разве на "простом" JavaScript нельзя создать эффекты плавного появления и т.п.?
Ответить с цитированием
  #4 (permalink)  
Старый 21.04.2012, 19:17
Аспирант
Отправить личное сообщение для Caminante Посмотреть профиль Найти все сообщения от Caminante
 
Регистрация: 23.03.2012
Сообщений: 40

Octane, естественно, можно, просто в вопросе прозвучало утверждение, что для создания диалогового окна обязательно нужен jQuery.
Ответить с цитированием
  #5 (permalink)  
Старый 21.04.2012, 19:42
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 03.04.2008
Сообщений: 6,233

Сообщение от Caminante
в вопросе прозвучало утверждение, что для создания диалогового окна обязательно нужен jQuery.
а) в вашем вопросе не было ничего подобного
Если уж на то пошло, то вы и вопроса-то не задали.
цитирую:
Сообщение от Dim@
я читал что это делается спомощью Jquery
то есть вы только читали об этом утверждении.
при этом вы все равно его исказили, потому что в прочитанном не было написано что jQuery нужен обязательно
вы это потом придумали.
пожалуйста, не придумывайте лишнего - здесь серьезный форум, а не фантазерский
б)
раз уж вы непременно хотите создать диалоговое окно с обязательным применением JQuery, то вот вам заготовка:
<script src="jquery.js" />
<script>
if(jQuery) {
    //тут код диалогового окна на чистом JavaScript
}
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 21.04.2012, 20:05
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Чет начал писать, хотел с CSS-анимацией поиграться, потом лень стало… короче вот примерно так делается без jQuery:
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
	<style>
		.alert .alert-shadow {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			left: 0;
			background: #000;
			opacity: 0.5;
			filter: alpha(opacity=50);
		}
		.alert .alert-dialog {
			position: fixed;
			top: 30%;
			left: 50%;
			width: 300px;
			margin-left: -150px;
			padding: 10px 0;
			background: #fff;
			border: 1px solid #000;
		}
		.alert .alert-text {
			padding: 10px;
		}
		.alert .alert-controls {
			text-align: center;
		} 
	</style>
</head>
<body>
	<script>
		function Alert(text) {
			this._create(text);
		}
		Alert.prototype = {
			constructor: Alert,
			html: [
				'<div class="alert">',
					'<div class="alert-shadow"></div>',
					'<div class="alert-dialog">',
						'<div class="alert-text">',
							'{TEXT}',
						'</div>',
						'<div class="alert-controls">',
							'<button>OK</button>',
						'</div>',
					'</div>',
				'</div>'
			].join(""),
			_rootElement: null,
			_create: function (text) {
				var node = document.createElement("div");
				node.innerHTML = this.html.replace("{TEXT}", text);
				this._rootElement = node.firstChild;
				this._addEvents();
			},
			_addEvents: function () {
				var thisAlert = this;
				this._rootElement.getElementsByTagName("button")[0].onclick = function () {
					thisAlert.close();
				};
			},
			show: function () {
				document.body.appendChild(this._rootElement);
			},
			close: function () {
				document.body.removeChild(this._rootElement);
			}
		};
	</script>
	<button onclick="new Alert('Работает!').show();">Show</button>
</body>
</html>
IE7+ из-за position:fixed

Последний раз редактировалось Octane, 21.04.2012 в 20:08.
Ответить с цитированием
  #7 (permalink)  
Старый 21.04.2012, 20:16
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от Octane
html: [
'<div class="alert">',
'<div class="alert-shadow"></div>',
'<div class="alert-dialog">',
'<div class="alert-text">',
'{TEXT}',
'</div>',
'<div class="alert-controls">',
'<button>OK</button>',
'</div>',
'</div>',
'</div>'
].join(""),
Это чо за... А сразу строкой никак?
Ответить с цитированием
  #8 (permalink)  
Старый 21.04.2012, 20:20
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

так удобнее
Ответить с цитированием
  #9 (permalink)  
Старый 21.04.2012, 22:46
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Раед, уточню Ваш пост :
html: 
				'<div class="alert">\
					<div class="alert-shadow"></div>\
					<div class="alert-dialog">\
						<div class="alert-text">\
							{TEXT}\
						</div>\
						<div class="alert-controls">\
							<button>OK</button>\
						</div>\
					</div>\
				</div>',


так даже символов меньше.
Ответить с цитированием
  #10 (permalink)  
Старый 21.04.2012, 22:55
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

мне бы не дали покоя лишние отступы
Ответить с цитированием
Ответ



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

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


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