jquery popup jqModal несколько диалоговых окон - PullRequest
Новая
       21

jquery popup jqModal несколько диалоговых окон

0 голосов
/ 13 мая 2011

я использую jqModal из jqModal я использую настройку по умолчанию, я имею в виду то, что я хочу, но дело в том, что это позволяет мне иметь только один диалог на страницу, как я могу изменить js или что-то ещечтобы я мог иметь несколько диалогов?

link1 --- открывает новые окна с некоторой информацией

link2 - открывает новые окна с другой информацией

link3 ---и так далее

все на одном сайте.

это то, что у меня сейчас есть: html: 

<div id="containers_verReceta">

        <div id="recetas_img">
            imagen
        </div>

        <div id="recetas_verMas">
        <p class="recetas_titulo">Pollo a la Mostaza</p>

            <p class="recetasRes">
        Quitar a las pechugas de sus partes blancas y cortarlas en dados como
        de 1 o 2 cm, salpimentándolas a continuación. 
                Echar el aceite en una cazuela
        y rehogar el pollo durante unos...
        <a href="#" class="jqModal">ver receta</a>
        </p>

        </div>

        <div id="lineapunteada"></div>
</div>

<div id="containers_verReceta">

        <div id="recetas_img">
            imagen
        </div>

        <div id="recetas_verMas">
        <p class="recetas_titulo">Pollo a la Mostaza2</p>

            <p class="recetasRes">
        Quitar a las pechugas de sus partes blancas y cortarlas en dados como
        de 1 o 2 cm, salpimentándolas a continuación. 
                Echar el aceite en una cazuela
        y rehogar el pollo durante unos...
        <a href="#" class="jqModal">ver receta2</a>
        </p>

        </div>

        <div id="lineapunteada"></div>
</div>


<div class="jqmWindow" id="dialog">
      <a href="#" class="jqmClose">Close</a>
    hello world
</div>

<div class="jqmWindow" id="dialog">   ///this is suppous to be the other dialog for the second link
      <a href="#" class="jqmClose">Close</a>
    hello world2
</div>

css: 

.jqmWindow {
    display: none;

    position: fixed;
    top: 17%;
    left: 50%;

    margin-left: -300px;
    width: 600px;

    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

и JS: 

<script type="text/javascript">
    $().ready(function() {
        $('#dialog').jqm();
    });
</script>

спасибо заранее.

Ответы [ 3 ]

7 голосов
/ 13 мая 2011
  1. Измените id ваших div'ов, чтобы они отличались друг от друга (например: dialog1, dialog2 и т. Д.)
  2. В ссылке удалите класс jqModalи добавьте идентификатор типа showDialog1, showDialog2 (по второй ссылке) и т. д.

Затем добавьте это в свой код: 

$(function() {
    $('.jqmWindow').jqm(); // will init everything with class jqmWindow

    $('#showDialog1').click(function() { $('#dialog1').jqmShow(); });
    $('#showDialog2').click(function() { $('#dialog2').jqmShow(); });
    .
    .
    .
})

Ресурсы:

1 голос
/ 22 апреля 2012

У меня есть два div с классом jqmWindow и отдельным id.Первое содержание div прямо в нем.второе содержимое div (jsp) im загружается через .load из jquery.после того, как я открою второй div (jsp) в модальном окне.У меня есть кнопка в th jsp, которая должна закрыть текущее модальное окно и открыть первый div в модальном окне (кнопка существует в jsp, а не в основном jsp).

0 голосов
/ 25 сентября 2011

Возникла та же проблема и, наконец, выяснилось, довольно просто обойти ее ...

HTML: 

<a href="#modalID_1" class="jqModal">link 1</a>
<a href="#modalID_2" class="jqModal">link 2</a>

<div class="jqmWindow" id="modalID_1">
    modal content
</div>
<div class="jqmWindow" id="modalID_2">
    modal content
</div>

JS: 

$('a.jqModal').click(function(){        
    $( $(this).attr('href') )
        .jqm({ modal:false, overlay:80 })
        .jqmShow();     
   return false;
});

Таким образом, все, что вам нужно сделать, это указать идентификатор триггеров вашей ссылки, который указывает на модальное окно, которое вы хотите открыть. Тогда он действительно действует так же, как и многие другие плагины лайтбокса.

...