顯示模式框人數超過1頁

Question

< <參考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」的模式框出現，但是當我試圖找回所有這些div時，每次模態框都不會在我點擊鏈接時出現。代碼有什麼問題？謝謝..

Answer 1

這在技術上不能解答你的問題，但我在我的網站上使用了jQuery Reveal for modals。看起來比你想要做的更容易。來源：http://www.zurb.com/playground/reveal-modal-plugin

它設置起來非常簡單，每個頁面可以有多個模態，並且可以通過事件（如點擊）或動態使用jquery觸發它們。

希望這會有所幫助！