несколько простых модальных коробок jQuery - PullRequest
Новая
       6

несколько простых модальных коробок jQuery

3 голосов
/ 06 сентября 2011

Как бы вы использовали простое модальное окно jQuery для нескольких экземпляров на одной странице с уникальным контентом для каждого описания ??

Буду ли я использовать функцию ".this"?

html: 

    <div id='class-descriptions'>
      <a href='#' class='basic'>Description 1</a>
      <a href='#' class='basic'>Description 2</a>
      <a href='#' class='basic'>Description 3</a>
      <a href='#' class='basic'>Description 4</a>
    </div>

<div id="description1">description 1 content</div>
<div id="description1">description 2 content</div>
<div id="description1">description 3 content</div>
<div id="description1">description 4 content</div>

js: 

jQuery(function ($) {
    // Load dialog on page load
    //$('#description').modal();

    // Load dialog on click
    $('#class-descriptions .class').click(function (e) {
        $('#description1').modal();

        return false;
    });
});

Ответы [ 2 ]

3 голосов
/ 06 сентября 2011

Первое, что вам нужно знать, это исправить html-код, вы не можете использовать один и тот же идентификатор для div, также вам нужно каким-то образом связать элемент a с элементом div, который имеет содержимое 

<div id='class-descriptions'>
  <a href='#' id="description-1" class='basic'>Description 1</a>
  <a href='#' id="description-2" class='basic'>Description 2</a>
  <a href='#' id="description-3" class='basic'>Description 3</a>
  <a href='#' id="description-4" class='basic'>Description 4</a>
</div>

<div id="content-1">description 1 content</div>
<div id="content-2">description 2 content</div>
<div id="content-3">description 3 content</div>
<div id="content-4">description 4 content</div>

Предполагая, что каждый элемент a относится к каждому div, который будет модальным, возможно, код должен быть таким: 

$(document).ready(function (){
    $('#class-descriptions .basic').click(function (e) {
        var aux = $(this).attr('id');
        aux = aux.replace('description','content');
        $(aux).modal();
    });
});
2 голосов
/ 06 сентября 2011

$ ('# class-description .class') неверно. Используйте .basic вместо .class

...