Как я могу получить DIV, чтобы сосредоточиться на странице с помощью jQuery и blockUI?

Я пытаюсь преобразовать Matt Berseth 'YUI Style Yes/No Confirm Dialog', поэтому я могу использовать его с плагином jQuery blockUI.

Я должен признать, что я не гуру CSS, но я думал, что это будет довольно легко даже для меня.... кроме 10 часов спустя я не понимаю, почему я не могу заставить эту работу взорваться.

Проблема заключается в том, что я, похоже, не могу получить "confirmDialogue" DIV, чтобы сосредоточиться на странице без каких-либо артефактов, показывающих над ней. Альтернативно, если я reset blockUI CSS настройки, выполнив....:

$.blockUI.defaults.css = {};

..... Я нахожу, что DIV выравнивает влево.

Я пробовал всевозможные вещи, но CSS не моя сильная сторона - это приложение стороннего приложения на стороне сервера: (

Итак, если кто-то там, где мастер jQuery/blockUI/CSS читает это... пожалуйста, можете ли вы пойти и сообщить мне, что я ошибаюсь?

В основном я следил за шаблоном дизайна на блоге Мэтта, и HTML выглядит так, как показано ниже (CSS не изменяется от образца Matt). Вы можете захватить файл png 'sprite' из полного образца загрузки проекта на http://mattberseth2.com/downloads/yui_simpledialog.zip - это проект .net, но я просто пытаясь заставить это работать в простом html файле, поэтому не требуется знание .NET.

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

<!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>

@Owen - большое спасибо за это. Мне пришлось внести небольшое изменение в класс .modalPopup CSS в таблице стилей Matt, чтобы:

position: fixed;

.... и он работает. Очень признателен. Мне действительно нужно присесть с моей книгой O'Reilly CSS, которую я никогда не получаю, чтобы прочитать какую-нибудь ночь....:)

Ответы

Ответ 1

Хмм, я не знаком с blockUI, но основы центрирования div довольно универсальны. Я предполагаю, что вы хотите, чтобы ваш #confirmDialogue div был сосредоточен на всем экране?

Если это так, вы хотите сделать несколько вещей:

#confirmDialogue {
    position: fixed;    // absolutely position this element on the page
    height: 200px;      // define your height/width so we can calculate with it after
    width: 300px;
}

теперь ваш jQuery:

$('#triggerDialogue').click(function() {
    // to position #confirmDialogue, we need the window height/width
    var msg = $('#confirmDialogue');
    var height = $(window).height();
    var width = $(document).width();

    msg.css({
        'left' : width/2 - (msg.width() / 2),  // half width - half element width
        'top' : height/2 - (msg.height() / 2), // similar
        'z-index' : 15,                        // make sure element is on top
    });

    // etc...
});

в основном, вы хотите зафиксировать положение своего #confirmDialogue (чтобы вы могли расположить его относительно размера вашего окна/документа. left и top объявления вычисляются на основе элементов текущей высоты/ширину и высоту окна и ширину документа.

Ответ 2

Посмотрите на этот jQuery MSG plugin. Он очень легкий и прост в использовании.

Пример кода

// default usage, this will block the screen and shows a 'please wait...' msg
$.msg();

// this will show a 'blah blah' msg
$.msg({ content : 'blah blah' });

дополнительные параметры см. здесь demo

полную документацию, пожалуйста, посмотрите этот пост. ссылки загрузки и исходного кода включены в сообщение.

Или, если вы просто хотите централизовать некоторый элемент DOM, вы также можете попробовать это plugin