Всплывающее окно

[val06]

спасибо большое все получилось. но теперь другая проблема, получается что окно по высоте резиновое, см. скрины 1 и 2, как я понимаю за это отвечает css, нашел вот это

.popup {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    width: 900px;
   padding: 20px;
    border-radius: 15px;
    border:3px solid #339900;
    background: #fff;
    vertical-align: middle
    }

вставил туда height: 100px;
и получилось черте что. см. 3 скрин.
может знаете как задать конкретное окно с прокруткой ?

 

[cektop48]

интересная тема

 

[chirs]

спасибо большое все получилось. но теперь другая проблема, получается что окно по высоте резиновое, см. скрины 1 и 2, как я понимаю за это отвечает css, нашел вот это

.popup {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    width: 900px;
   padding: 20px;
    border-radius: 15px;
    border:3px solid #339900;
    background: #fff;
    vertical-align: middle
    }

вставил туда height: 100px;
и получилось черте что. см. 3 скрин.
может знаете как задать конкретное окно с прокруткой ?

высоты 100px конечно маловато... ))
что касается вашей цели - просто добавьте туда еще:

overflow-y: auto;

и тогда, если контент не будет входить в отведенную высоту, будет справа вертикальная полоса прокрутки.

 

[val06]

100px мало, я знаю, поставил просто для теста.
все получилось спасибо, только сейчас пропал крестик для закрытия окна

 

[chirs]

потому что <div class="popup__close"> находится внутри <div class="popup"> и поэтому становится частью прокручиваемой страницы.
нужно "вынести" popup__close из popup, например, вот так:

<div class="popup__overlay" style="display:none;width:940px;">
  <div class="popup">
    <div class="popup__html"></div>
  </div>
  <div class="popup__close">X</div>
</div>

 

[val06]

попробовал не получилось нету креста закрытия, вышел из положения так, в css вместо top: -18px, прописал 2px

.popup__close {
    display: block;
    position: absolute;
    top: 2px;
    right: 10px;
    width: 12px;
    height: 12px;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    background: #339900;
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    cursor:pointer;
    }

 

[chirs]

попробовал не получилось нету креста закрытия, вышел из положения так, в css вместо top: -18px, прописал 2px

Ясно, просто поидее, если popup__close внутри div-а с контентом с прокруткой, значит, он тоже будет "прокручиваться" вместе со всем контентом...
ну да не важно, главное, что всё получилось ))

 

[karakym]

Имхо автору не нужно париться по поводу модального окна, сделайте его на css с изначально скрытым содержимым (display: none
А в jQuery по нажатию меняете параметр .css('display':'block');

<style>
.modal {
   position: fixed; /* что бы не убегало при скролле */
   width: 400px; /* ширина */
   height: 400px; /* высота */
   top: calc(50% - 200px); /* вертикально по центру */
   left: calc(50% - 200px); /* горизонтальный центр */
   display: none; /* скрываем */
   opacity: 0; /* добавим эффект появления */
   transition: opacity 1s; /* добавим плавности эффекта */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
   $('.modal_butt').click(function() {
      $('.modal').css('display':'block','opacity':'1');
}
}
</script>
<div class="modal_butt">Открыть окно</div>
<div class="modal">
   Контент
</div>

Так же для закрытия окна нужно сделать проверку на открытие и на клик вне области окна например.

 

[karakym]

Вот вам пример: Для просмотра ссылки Войди или Зарегистрируйся

 

[karakym]

ссылка не работает ...

Какая ссылка не работает? Уточни!