| 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>',
так даже символов меньше. |
мне бы не дали покоя лишние отступы
|
| Часовой пояс GMT +3, время: 19:23. |