Question

此代码打开一个模态框。但我的问题是，当我尝试使用不同的ID打开它以进行编辑时，模态框不起作用。我想添加此代码<input type="button" value="Edit Item" id="edit">使用另一个ID打开一个模式框。但为什么不工作？

<input type="button" value="Add New Item" id="add_new">

<div class="entry-form">
<form name="userinfo" id="userinfo">
    <table width="100%" border="0" cellpadding="4" cellspacing="0">
    <tr>
     <td colspan="2" align="right"><a href="#" id="close">Close</a></td>
    </tr>
    <tr>
    <td>Item</td>
    <td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
    </tr>
</div>

<script>
$(document).ready(function(){

    $("#add_new").click(function(){
        $(".entry-form").fadeIn("fast");    
    });

    $("#close").click(function(){
        $(".entry-form").fadeOut("fast");
    });
});
</script>

Answer 1

首先，您的HTML已损坏，因为您尚未为以下任何内容添加结束标记：第一个div，表格，表格，第二个div。

其次，您的脚本应具有type="text/javascript"属性。

Answer 2

您还必须将#edit添加到点击事件处理程序中，如this jsFiddle中所示。

 <input type="button" value="Add New Item" id="add_new">
 <input type="button" value="Edit Item" id="edit">

 <div class="entry-form">
 <form name="userinfo" id="userinfo">
     <table width="100%" border="0" cellpadding="4" cellspacing="0">
     <tr>
      <td colspan="2" align="right"><a href="#" id="close">Close</a></td>
     </tr>
     <tr>
     <td>Item</td>
     <td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
     </tr>
 <div>

和你的Javascript：

   $(document).ready(function(){

       $("#add_new, #edit").click(function(){
           $(".entry-form").fadeIn("fast");
       });

       $("#close").click(function(){
           $(".entry-form").fadeOut("fast");
       });
   });

打开模态框不起作用

2 个答案: