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

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 に答える