1

当我单击超链接时，我想制作一个弹出框（其中包含文本）。我的 html 中有 5 个超链接。这是代码：

<div class="four columns">
  <h4>
    <a id="OpenDialog" href="#" >Open dialog 1</a>
  </h4>
  <img src="one.jpg" />
  <div id="dialog" title="Dialog Title 1">dialog text 1</div>
</div>
<div class="four columns">
  <h4>
    <a id="OpenDialog" href="#" >Open dialog 2</a>
  </h4>
  <img src="two.jpg" />
  <div id="dialog" title="Dialog Title 2">dialog text 2</div>
</div>

我也把它放在我的html中：

   <script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function () {
            $("#dialog").dialog({modal: true, height: 590, width: 1005 });
        });
    });
  </script>

我还包括了这个准备好的脚本：

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

但问题是弹出功能仅在第一个超链接中起作用。

4

2 回答 2

4

我会使用 jquery 父母和孩子来得到你想要的。（jsfiddle：http: //jsfiddle.net/pjVcR/2/）

<script>
$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( e, ui ) {
      $(this).dialog('destroy');
    }
  });
});
</script>

在这种情况下，您必须在开始时隐藏 .dialog div。此外，将对话框容器更改为具有名为“dialog”的类（而不是 id）。这样，您将不会有许多具有相同 id 的 div，并且您的功能将在那里。

这里有一些参考：

  1. http://api.jquery.com/parent/
  2. http://api.jquery.com/children/
  3. 获取触发事件的元素的 ID
于 2013-10-14T14:13:51.177 回答
0

首先添加这些文件

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

然后

 <script type="text/javascript">
    $(document).ready(function () {
        $("#OpenDialog").click(function (e) {
        e.preventDefault();
            $("#dialog").dialog({modal: true, height: 590, width: 1005 });
        });
    });
  </script>

参考jQuery 对话框

于 2013-10-14T11:16:17.917 回答