1

Всем здравствуйте!

Вопрос следующего характера. Есть скрипт модального окна, который открывает любое количество окон на странице. Но в этом случае тогда в скрипте нужно прописывать каждое окно. А как сделать, чтобы в скрипте указать просто открытие окна по id. Чтобы в html было только <a id="1">. Открыть окно </a> и <div id="1"> и не нужно было каждое окно прописывать в скрипте. А также в html указать одну подложку див, чтобы ее не указывать для каждого окна. Вот скрипт. Помогите, пожалуйста, сам разобраться не могу.

<div class="container">
  <p id="modal-link">Click to open a modal window and an overlay.</p>
</div>
<div class="container1">
   <p href="#" id="click_me">Click_me</p>
</div>
<div class="modal-overlay">
  <div class="modal-window">
    <h1>Welcome to the modal window!</h1>
    <p>This is a pop up that may contain a form or other info</p>

    <button class="close-button">Close popup</button>
</div>

</div>
<div class="modal-overlay1">
  <div class="modal-window1">
    <h1>Номер2</h1>
    <p>Есть же</p>
    <button class="close-button">Close popup</button>
</div>
  </div>

#modal-link {
  font-size: 2em;
  color: #FFFFEE;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  width: 100%;
  display: none;
  z-index: 1000;
  overflow: scroll;
}

.modal-window {
  position: absolute;
  max-width: 500px;
  width: 50%;
  padding: 20px;
  background: #FFF;
  top: 0;
  display: none;
  z-index: 2000;
}
.modal-overlay1 {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  width: 100%;
  display: none;
  z-index: 1000;
  overflow: scroll;
}

.modal-window1 {
  position: absolute;
  max-width: 500px;
  width: 90%;
  padding: 20px;
  background: #FFF;
  top: 0;
  display: none;
  z-index: 2000;
}

 #click_me{
   cursor:pointer;
 }

function Modal(modalEl, overlayEl, modalOpener) {
          this.modal = $(modalEl);
          this.modalOpener = $(modalOpener);
          this.overlay = $(overlayEl);
          this.wWidth = $(window).width();
          this.wHeight = $(window).height();
          this.dHeight = $(document).height();
        }

        Modal.prototype = {
          init: function(){
            this.bindHandlers();
          },

          bindHandlers: function(){
            var self = this;

            $(self.modalOpener).on('click', function(){
              self.showModal();
            });

            $(window)
              .resize(function() {
                self.setWinSize($(this));
                self.setModalPosition();
             })
               .scroll(function() {
                self.setWinSize($(this));
                self.setModalPosition();
             });

            $('.close-button').click(function(){
              self.hideModal();
            });
          },

          showModal: function(){
            this.overlay.fadeIn();
            this.modal.fadeIn();
            this.setModalPosition();
          },

          hideModal: function(){
            this.overlay.fadeOut();
            this.modal.fadeOut();
          },

          setModalPosition: function(){
            var modalHeight = this.modal.outerHeight(),
                modalWidth = this.modal.outerWidth(),
                scrollTop = $(window).scrollTop();

            if(this.wHeight < modalHeight){
              this.modal.css('top', scrollTop);
            } else {
              this.modal.css('top', this.centerVertically(this.wHeight,modalHeight,scrollTop));
            }

            if(this.wWidth < modalWidth){
              this.modal.css('left', 0);
            } else {
              this.modal.css('left', this.centerHorizontally(this.wWidth,modalWidth));
            }
          },

          centerVertically: function(w, m, scroll){
            return ((w - m)/2 + scroll);
          },

          centerHorizontally: function(w, m){
            return (w - m)/2;
          },

          setWinSize:function(win){
            this.wWidth = win.width();
            this.wHeight = win.height();
          }
        }

      $(document).ready(function(){
        var modal = new Modal('.modal-window', '.modal-overlay','#modal-link'),
            modal1 = new Modal('.modal-window1', '.modal-overlay1','#click_me');
        modal.init();
        modal1.init();
      });
1
  • @LADYX, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 27 фев 2015 в 8:46

2 ответа 2

2

Как я понимаю, есть ссылки с id от 1 до n, открывающие соответствующие дивы. Тогда лучше сделать так (осторожно, есть jquery):

[js]

$('a').live('click', function() {

    // разрезаем id ссылки по дефису и передаем число переменной thisId
    var thisId = $(this).attr('id').split('-')[1];

    // показываем соответствующий див
    $('#div-' + thisId).show();

});

[/js]

[html]

<a id="link-1" class="openModal">Открыть 1 див</a>
<a id="link-2" class="openModal">Открыть 2 див</a>
...
<a id="link-n" class="openModal">Открыть n див</a>

<div id="div-1" class="modal"></div>
<div id="div-2" class="modal"></div>
...
<div id="div-n" class="modal"></div>

[/html]

Остальные украшалки — по вкусу.

-- UPDATED 27.02.2015 --

Я, видимо не совсем верно понял вопрос. Имеем несколько ссылок, а дивы не прописаны. Тут тогда так:

[js]

$('a').live('click', function() {

    // разрезаем id ссылки по дефису и передаем число переменной thisId
    var thisId = $(this).attr('id').split('-')[1];

    var modal = '<div id="div-' + thisId + '" class="modal">[ some content ]</div>';

    // показываем соответствующий див
    $('body').append(modal);

});

[/js]

[html]

<a id="link-1" class="openModal">Открыть 1 див</a>
<a id="link-2" class="openModal">Открыть 2 див</a>
...
<a id="link-n" class="openModal">Открыть n див</a>

[/html]

Содержимое дива [ some content ] в этом случае нужно получать динамически/ Копать нужно в эту сторону

–– UPDATE 2 ––

А мы и не прописываем в скрипте все дивы (см. уточнение моего ответа выше). - там линки с параметрами, при нажатии на которые определяем их ИД а скрипт думает, что ему дальше делать. Мы выводим модальное окно, а его содержимое заполняем аяксом данными - хоть текстом, хоть картинками. А под подложкой Вы имеете в виду темный фон сзади? Тогда просто меняем переменную modal:

var modal = '<div class="overlay" style="position:fixed; top:0; left:0;width:100%;height:100%;background-color:_rgba(0,0,0,0.8);">'; 
modal += '<div id="modal" class="modal"></div>'; 
modal += '</div>';

Чтобы заполнить данными отправляем такой запрос (типа):

$.post("/get_modal_content.php", { 
    id: thisId, // первый параметр, который придет скрипту 
                // get_modal_content.php в виде $_POST['id'] 
    param: 2    // второй параметр — $_POST['param'] 
    ...         // и т.д. 
}, function(data) { // обрабатываем ответ сервера 
    $('#modal').html(data); // помещаем ответ в модальное окно 
});

А вот и сам обработчик (примитивно) get_modal_content.php:

<?php

switch($_POST['id']) { 
    case 1: 
        echo 'Первое окно'; 
        break;
    case 2:
        echo 'Второе окно';
        break;

    ... // и так далее

    default:
        echo 'Нажата неизвестна ссылка';
}

?>
3
  • Дополнил свой ответ — enjoy, как говорится...
    – densmith
    27 фев 2015 в 13:12
  • см. UPDATE 2 моего ответа выше...
    – densmith
    27 фев 2015 в 16:09
  • Вот сюда смотри: jsfiddle.net/netcrox/Lwj4L617 Тут не работает кнопка закрытия модального окна, причина там в комменте. Отползаю, сорри
    – densmith
    27 фев 2015 в 20:34
1

Эти модальные окна - суть одно и то же? Их содержание идентично?

Если да, то можно сделать так: http://jsfiddle.net/boris_U/67z4oasw/1/

Только тут используется bootstrap.

Каждая ссылка, открывающая окно, имеет атрибут "data-ec-id". После открытия окна мы можем его получить как

var id = e.relatedTarget.dataset.ecId;

После чего при помощи $.get получить нужное содержимое для нашего окна и вставить его в контейнер #docList.

2

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.