在页面上显示超过 1 个模态框答案

【问题标题】：Showing modal-box morethan 1 on a page在页面上显示超过 1 个模态框
【发布时间】：2012-08-15 02:17:41
【问题描述】：

this thread >>

我想在一个页面上制作几个模态框：

<script>
var grid_modal_options = {
    height: 'auto',
    width: '80%',
    modal: true
};
function showProducts1ModalBox() {
    $("#products1_modal_box").dialog(grid_modal_options);
    $("#products1_modal_box").parent().appendTo('form:first');
}
function showProducts2ModalBox() {
    $("#products2_modal_box").dialog(grid_modal_options);
    $("#products2_modal_box").parent().appendTo('form:first');
}
function showProducts3ModalBox() {
    $("#products3_modal_box").dialog(grid_modal_options);
    $("#products3_modal_box").parent().appendTo('form:first');
}
</script>

<div id="products1_modal_box" title="Products" style="display: none;">
  <div class="in">
    <div class="grid-12-12">
      <form id="products1_modal_box_form" action="#" method="post">
    <table>
          <thead>
            <tr>
              <th>&nbsp;</th>
              <th>Product</th>
            </tr>
          </thead>
          <!-- Query for read mysql goes here (I skipped this line because it's not the main thing I'm gonna ask since it's run well) /-->
          <tbody>
          <?php
            //read the results
            while($fetch = mysqli_fetch_array($r)) {                
              print "<tr>";
              print "  <td><a href=\"javascript:;\" onclick=\"$('#products1_id_textbox').val('".$fetch[0]."');$('#products1_modal_box').dialog('close');\">Choose</a></td>";
              print "  <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID
              print "</tr>";
            }
          ?>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>

<div id="products2_modal_box" title="Products" style="display: none;">
  <!-- 
    The rest goes here (the same with "products1_modal_box") 
    except: 
    print "  <td><a href=\"javascript:;\" onclick=\"$('#products2_id_textbox').val('".$fetch[0]."');$('#products2_modal_box').dialog('close');\">Choose</a></td>";
  /-->
</div>

<div id="products3_modal_box" title="Products" style="display: none;">
  <!-- 
    The rest goes here (the same with "products1_modal_box") 
    except: 
    print "  <td><a href=\"javascript:;\" onclick=\"$('#products3_id_textbox').val('".$fetch[0]."');$('#products3_modal_box').dialog('close');\">Choose</a></td>";
  /-->
</div>

还有：

<input type='text' id='products1_id_textbox' name='products1_id_textbox' />
<a href='#' onclick='showProducts1ModalBox(); return false;'>Choose products 1</a>

<input type='text' id='products2_id_textbox' name='products2_id_textbox' />
<a href='#' onclick='showProducts2ModalBox(); return false;'>Choose products 2</a>

<input type='text' id='products3_id_textbox' name='products3_id_textbox' />
<a href='#' onclick='showProducts3ModalBox(); return false;'>Choose products 3</a>

为什么这不起作用？当我删除 div "products2_modal_box" 和 "products3_modal_box" 时，出现了 div "products1_modal_box" 的模态框，但是当我试图取回所有它们时，单击链接时每个模态框都没有出现。代码有什么问题？谢谢..

【问题讨论】：

标签： php javascript jquery modal-dialog

【解决方案1】：

这在技术上并不能回答您的问题，但我在我的网站上使用 jQuery Reveal 进行模态。似乎比您尝试做的要容易得多。来源：http://www.zurb.com/playground/reveal-modal-plugin

它真的很容易设置，每个页面可以有多个模态，并且可以通过事件（如点击）或使用 jquery 动态触发它们。

希望这会有所帮助！

【讨论】：