| Octane | 21.04.2012 23:55 |
мне бы не дали покоя лишние отступы 
Нужно создать диалоговое окно
Всем доброго времени суток нужно создать диалоговое окно вот только проблема я читал что это делается спомощью Jquery, но я не знаю Jquery я знаю лишь простой javascript.В общем мне надо что-бы кто-нибудь мне объяснил как его сделать (диалоговое окно типа alert).Заранее благодарен.:-?
|
А разве на "простом" JavaScript нельзя создать диалоговое окно типа alert? Или нужны эффекты плавного появления и т.п.?
|
А разве на "простом" JavaScript нельзя создать эффекты плавного появления и т.п.?
|
Octane, естественно, можно, просто в вопросе прозвучало утверждение, что для создания диалогового окна обязательно нужен jQuery.
|
Цитата:
Если уж на то пошло, то вы и вопроса-то не задали. цитирую: Цитата:
при этом вы все равно его исказили, потому что в прочитанном не было написано что jQuery нужен обязательно вы это потом придумали. пожалуйста, не придумывайте лишнего - здесь серьезный форум, а не фантазерский б) раз уж вы непременно хотите создать диалоговое окно с обязательным применением JQuery, то вот вам заготовка:
<script src="jquery.js" />
<script>
if(jQuery) {
//тут код диалогового окна на чистом JavaScript
}
</script>
|
Чет начал писать, хотел с 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 |
Цитата:
|
так удобнее
|
Раед, уточню Ваш пост :
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>',
так даже символов меньше. |
мне бы не дали покоя лишние отступы
|
спасибо Octane я хотел реально что-то типа такого:)
|
мне дополнительно понадобилась возможность рекурсивного вызова и автоматическая подгонка ширины и выравнивание по центру. По этому немного переделал код 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 |
|
| Часовой пояс GMT +3, время: 13:28. |