Я пытаюсь конвертировать ' Стиль YUI Мэтта Берсета Да / Нет, Подтвердить диалог ', чтобы я мог использовать его с плагином jQuery blockUI.
Я должен признать, что я не гуру CSS, но я подумал, что это будет довольно легко даже для меня ... за исключением 10 часов спустя, я в растерянности относительно того, почему я не могу заставить взорванную вещь работать.
Проблема в том, что я не могу заставить DIV «verifyDialogue» центрироваться на странице без каких-либо артефактов, отображаемых над ней. В качестве альтернативы, если я сбрасываю настройки CSS blockUI, выполняя ....:
$.blockUI.defaults.css = {};
..... Я считаю, что DIV выравнивается по левому краю.
Я пробовал все виды вещей, но CSS не моя сильная сторона, будучи серверным приложением, вроде: (
Так что если кто-нибудь, кто является мастером jQuery / blockUI / CSS, читает это ... пожалуйста, не могли бы вы попробовать и сообщить мне, что я делаю не так?
В основном я следовал шаблону дизайна в блоге Мэтта, и HTML выглядит так, как показано ниже (CSS не изменился по сравнению с примером Мэтта). Вы можете получить png-файл «sprite» из полного примера загрузки проекта по адресу http://mattberseth2.com/downloads/yui_simpledialog.zip - это проект .net, но я просто пытаюсь заставить его работать в простом html-файле, поэтому нет знаний .NET требуется.
В любом случае, любой совет и руководство были бы действительно очень полезными. Я даже буду стимулировать вещи покупать обещая купить вам плетку пива, если мы когда-нибудь встретимся :) 1020 *
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript" src="script/jquery.blockUI.js"></script>
<style>
.modalpopup
{
font-family: arial,helvetica,clean,sans-serif;
font-size: small;
padding: 2px 3px;
display: block;
position: absolute;
}
.container
{
width: 300px;
border: solid 1px #808080;
border-width: 1px 0px;
}
.header
{
background: url(img/sprite.png) repeat-x 0px -200px;
color: #000;
border-color: #808080 #808080 #ccc;
border-style: solid;
border-width: 0px 1px 1px;
padding: 3px 10px;
}
.header .msg
{
font-weight: bold;
}
.body
{
background-color: #f2f2f2;
border-color: #808080;
border-style: solid;
border-width: 0px 1px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 30px;
}
.body .msg
{
background: url(img/sprite.png) no-repeat 0px -1150px;
float: left;
padding-left: 22px;
}
.footer
{
background-color: #f2f2f2;
border-color: #808080;
border-style: none solid;
border-width: 0px 1px;
text-align:right;
padding-bottom: 8px;
padding-right: 8px;
}
.close
{
right: 7px;
background: url(img/sprite.png) no-repeat 0px -300px;
width: 25px;
cursor: pointer;
position: absolute;
top: 7px;
height: 15px;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
}
</style>
</head>
<body>
<input id="triggerDialogue" name="triggerDialogue" type="button" value="Go" />
<div id="confirmDialogue"
class="modalpopup" style="display:none; text-align: center">
<div class="container">
<div class="header">
<span class="msg">Are you sure?</span>
<a onclick="return false;" class="close"
href="javascript: return false;"></a>
</div>
<div class="body">
<span class="msg">Do you want to continue?</span>
</div>
<div class="footer">
<input type="button" id="Button1" value="Yes" style="width:40px" />
<input type="button" id="Button2" value="No" style="width:40px" />
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#triggerDialogue').click(function() {
$.blockUI({ message: $('#confirmDialogue') });
});
});
</script>
</body>
</html>
@ Оуэн - большое спасибо за это. Мне пришлось внести небольшое изменение в CSS-класс .modalPopup в таблице стилей Мэтта:
position: fixed;
.... и это работает. Очень признателен. Я действительно должен сесть с моей книгой О'Рейли CSS , которую я никогда не получу, когда-нибудь прочитаю ....:)