2

I want to pop over different forms on different button click. I'm using this code for that. but all button click shows first content form. How it solve? Code

<a href="#" class="button">Click 1</a>
<div id="modal">
    <div id="heading">Content form 1</div>  
</div>
<a href="#" class="button">Click 2</a>
<div id="modal">
    <div id="heading">Content form 2</div>  
</div>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.reveal.js"></script>

<script type="text/javascript">
$(document).ready(function () {
  $('.button').click(function (e) {  // Button which will activate our modal
    $('#modal').reveal({             // The item which will be opened with reveal
      animation: 'fade',             // fade, fadeAndPop, none
      animationspeed: 600,           // how fast animtions are
      closeonbackgroundclick: true,  // if you click background will modal close?
      dismissmodalclass: 'close'     // the class of a button or element that will close an open modal
    });
    return false;
  });
});
</script>
4

3 回答 3

1

您正在使用非唯一 ID。它只会给你第一个。

<a href="#" class="button" data-modal="1">Click 1</a>
<div id="modal">
    <div id="heading">Content form 1</div>  
</div>
<a href="#" class="button" data-modal="2">Click 2</a>
<div id="modal">
    <div id="heading">Content form 2</div>  
</div>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.reveal.js"></script>

<script type="text/javascript">
$(document).ready(function () {
  $('.button').click(function (e) {  // Button which will activate our modal
    $('#modal' + $(this).data('id')).reveal({             // The item which will be opened with reveal
      animation: 'fade',             // fade, fadeAndPop, none
      animationspeed: 600,           // how fast animtions are
      closeonbackgroundclick: true,  // if you click background will modal close?
      dismissmodalclass: 'close'     // the class of a button or element that will close an open modal
    });
    return false;
  });
});
</script>

观察方法：

  1. 我在您的每个模态 ID 后面添加了一个数字。
  2. 我如何为每个链接添加一个名为“data-id”的属性以及我们想要的相应数字。
  3. 我如何使用 jQuery 的精彩 data() 方法来获取相应的数字。

这种方法的优点是可以将链接移动到它们需要的任何位置，而无需更改点击事件的内部结构。Aka 我们不需要通过 , 等进行.next()DOM.parent()搜索.find()。

于 2013-03-13T04:45:44.487 回答
0

如前所述，您的 div 中有一个非唯一 ID，因此$('#modal')只选择第一个。

但是，这将选择所有这些：

$("div[id=modal]")

在这方面请参阅以下问题：如何在 jQuery 中选择具有特定 ID 的所有元素？

于 2013-03-13T05:04:20.150 回答
0

标识一组元素时使用的正确属性是class, not id，它必须是元素唯一的。应用类名而不是 ID，您的标记将如下所示：

<div class="modal">
    ...
</div>

由于您正在尝试操作单击按钮之前的模式，因此最好的方法是使用该prev方法来选择按钮之前的元素。

$('.button').click(function (e) {
    $(this).prev('.modal').reveal({
        ...
    });
    return false;
});
于 2013-03-13T05:41:36.430 回答