Модальные окна с гибкой шириной - PullRequest
Новая
       6

Модальные окна с гибкой шириной

1 голос
/ 30 августа 2011

Кто-нибудь знает способ иметь всплывающее окно модального окна, которое может иметь гибкую ширину (скажем,% от ширины экрана), которая всегда центрирована, по крайней мере, когда она вызывается.собираюсь сам написать это в js / jQuery (через функцию, в которую вы можете отправлять min-width, процент и max width), но мне интересно узнать о готовых решениях, чтобы избежать повторного изобретения колеса (особенноони не приходят с громоздкими фреймворками).

Сейчас я использую jqModal для окон, и мне нравится его простота

Ответы [ 2 ]

0 голосов
/ 06 января 2012

Вот метод, который я разработал, чтобы создать текучие модалы со всеми описанными вами функциями, и в качестве бонуса, он даже не требует JavaScript в 95% случаев, только HTML и CSS!- http://www.backalleycoder.com/2011/11/16/best-damn-modal-method-period%E2%84%A2/ - ниже я вставил используемые им HTML и CSS, пост блога содержит гораздо более подробное объяснение и демонстрационную версию.

Структура HTML: 

<table id="modal">
  <tbody id="modal-tbody">
    <tr id="modal-tr">
      <td id="modal-td">
        <div id="modal-content">
            <div id="modal-body">
               Some modalicious content here for your  viewing  pleasure!
            </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS вам понадобится: 

html, body
{
    height: 100%; /* root and body MUST be height 100% */
}

#modal
{
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
}

#modal-tbody, #modal-tr, #modal-td
{
    height: 100%; /* All table elements should be height 100% */
}

#modal-td
{
    vertical-align: middle;
}

#modal-content
{
    position: relative;
    left: 100%;
    height: auto; /* HEIGHT optional, any unit */
    width: 50%; /* WIDTH optional, any unit */
    max-height: 80%; /* MAX-HEIGHT optional, if height auto, must be % */
    min-height: 80px; /* MIN-HEIGHT optional, any unit */
    max-width: 225px; /* MAX-WIDTH optional, any unit */
    min-width: 80px; /* MIN-WIDTH optional, any unit */
    margin: 0 auto;
    border: 1px solid;
    background: #eaeaea;
    overflow: auto;
}
0 голосов
/ 31 августа 2011

Вы пробовали jquery модальные опции

Ширина диалога в пикселях. 

$( ".selector" ).dialog({ width: 460 });

http://jqueryui.com/demos/dialog/#option-width

...