Модальное окно с использованием jQuery

Последние веяния моды в стиле веб 2.0 принесли с собой много возможностей, которые ранее были доступны только настольным приложениям. Современные браузеры поддерживают CSS и Javascript на уровне, вполне достаточном для реализации модальных окон. Модальное окно представляет собой окно, которое полностью перехватывает на себя фокус, не давая пользователю взаимодействовать с какими-либо другими окнами на экране. Сегодня рассмотрим способ создания такого окна с использованием библиотеки jQuery. В итоге мы получим что-то вроде этого:

Для начала создадим простую HTML-страницу, содержащую два <div>-блока:

  • popupContact - модальное окно;
  • backgroundPopup - затемнение.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; windows-1251" />
    <title>Модальное окно с использованием jQuery</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="popup.js" type="text/javascript"></script>
</head>
<body>
    <center>
        <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
        <div id="button"><input type="submit" value="Press me please!" /></div>
    </center>
    <div id="popupContact">
        <a id="popupContactClose">x</a>
        <h1>Title of our cool popup, yay!</h1>

        <p id="contactArea">
            Here we have a simple but interesting sample of our new stuning and smooth popup.
            As you can see jQuery and CSS does it easy...
            <br/><br/>
            We can use it for popup-forms and more... just experiment!
            <br/><br/>
            Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
            <br/><br/>
            <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
        </p>
    </div>

    <div id="backgroundPopup"></div>
</body>
</html>

Файл стилей нашей HTML-страницы:

body{
  line-height:1;
  font-size: 12px;
  font-family:arial,sans-serif;
  margin:0;
}
img {
  border:0;
}
a {
  cursor: pointer;
  text-decoration:none;
}
br.both{
  clear:both;
}
#backgroundPopup{
  display:none;
  position:fixed;
  _position:absolute; /* hack for internet explorer 6 */
  height:100%;
  width:100%;
  top:0;
  left:0;
  background:#000000;
  border:1px solid #cecece;
  z-index:1;
}
#popupContact{
  display:none;
  position:fixed;
  _position:absolute; /* hack for internet explorer 6 */
  height:384px;
  width:408px;
  background:#FFFFFF;
  border:2px solid #cecece;
  z-index:2;
  padding:12px;
  font-size:13px;
}
#popupContact h1{
  color:#6FA5FD;
  font-size:22px;
  border-bottom:1px dotted #D3D3D3;
  padding-bottom:2px;
  margin-bottom:20px;
}
#popupContactClose {
  font-size:14px;
  line-height:14px;
  right:6px;
  top:4px;
  position:absolute;
  color:#6fa5fd;
  font-weight:bold;
  display:block;
}
#button{
  text-align:center;
  margin:100px;
}

Вот как это будет выглядеть в браузере:

Теперь JavaScript (файл popup.js):

//0 - окно закрыто; 1  - окно открыто; 
var popupStatus = 0;
// Показываем (открываем) окно, используя эффекты jQuery 
function loadPopup(){ 
  // Открываем окно только если оно закрыто
  if(popupStatus==0){ 
    $("#backgroundPopup").css({ 
      "opacity": "0.7" 
    })
    $("#backgroundPopup").fadeIn("slow")
    $("#popupContact").fadeIn("slow")
    popupStatus = 1
  } 
}
// Скрываем (закрываем) окно, используя эффекты jQuery
function disablePopup(){ 
  // Закрываем окно только если оно открыто
  if(popupStatus==1){ 
    $("#backgroundPopup").fadeOut("slow")
    $("#popupContact").fadeOut("slow")
    popupStatus = 0
  } 
}
// Окно будет расположено в центре страницы
function centerPopup(){ 
  // ширина и высота окна браузера 
  var windowWidth = document.documentElement.clientWidth
  var windowHeight = document.documentElement.clientHeight
  var popupHeight = $("#popupContact").height()
  var popupWidth = $("#popupContact").width()
  // размещаем окно в центре страницы
  $("#popupContact").css({ 
    "position": "absolute"
    "top": windowHeight/2-popupHeight/2
    "left": windowWidth/2-popupWidth/2 
  })
  // только для MS IE 6   
  $("#backgroundPopup").css({ 
    "height": windowHeight 
  })
}
// Обработчики событий
$(document).ready(function(){
  // ОТКРЫТИЕ ОКНА
  // Событие - щелчек по кнопке
  $("#button").click(function(){
    // размещаем окно в центре страницы
    centerPopup();
    // открываем окно
    loadPopup();
  });
               
  // ЗАКРЫТИЕ ОКНА
  // Событие - щелчок по "x"
  $("#popupContactClose").click(function(){
    // закрываем окно
    disablePopup();
  });
  // Событие - щелчок за пределами окна
  $("#backgroundPopup").click(function(){
    // закрываем окно
    disablePopup();
  });
  // Событие - нажата клавиша Escape
  $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1) {
      // закрываем окно
      disablePopup();
    }
  });
});

Ссылки по теме:

Комментариев: 10

  1. AdrianMG:

    Thanks for the referral ;)

  2. Алексей Качаев:

    Симпатично, но я лично пользуюсь jqModal - плагин для jQuery.

  3. dap:

    Определенно, использовать плагины на много легче

  4. Дима:

    Спасибо поучительно, только непонял зачем centerPopup() дается “position absolute” если в стайлах “position fixed”

  5. Вит:

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

  6. Sklo-ua:

    jqModal - плагин для jQuery
    Поддерживаю товарища!

  7. Ruslan:

    Чем не подхотят стандартные окна которые предлагается создавать с помощью jQuery
    http://jqueryui.com/demos/dialog/

  8. ESP:

    В IE6 если у окна есть скроллинг, то нижняя прокручиваемая часть не блокируется заливкой. А вообще - мне понравилось, более легковесный, чем тот же jqModal.

  9. Виктор:

    Если страница большая, и кнопка вызова модального окна находится где-то внизу, то модальное окно не видно, так как оно появляется где-то сверху. Приходится прокручивать страницу вверх, чтобы увидеть окно.

  10. Hamlet:

    Большое спасибо! Долго искал как сделать модальное окно не используя никаких плагинов!

    Респект автору!

Оставьте свой отзыв