jquery - Twitter Bootstrap 3 模式不工作

Question

我有一个页面有两个潜在的模态要显示。一个(并且这个有效)仅在用户执行特定功能后显示。另一个，将提示用户并询问他们是否要删除职位。

这是我设置的 fiddle :

Fiddle of non working modal

代码:

                        <div class="pull-centered">
                            <a class="btn btn-danger" data-target="#Delete"  ID="DeletePosButton" role="button" data-toggle="modal">Delete Position</a> 
                         </div>
<!-- This is the modal that doesn't work -->

            </form> 
                 <script>
                      $('#EditPosition').submit(function(){
                          $('#SavePosition').val('Updating...');
                          $('input[type=submit]', this).attr('disabled', 'disabled');
                      });
                </script>           


<!-- modal window content, the id of the containing div must match the href on the toggle button -->
<div class="modal fade" id="RemoveCandidate" tabindex="-1" role="dialog" aria-hedden="true">
  <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
          <h3 id="modalLabel"><cfoutput>Remove the current assignment?</cfoutput></h3>
        </div>
        <div class="modal-body">
           <div class="well">
            <cfoutput>
             <form action="#event.buildlink(rc.RemoveTourAssignment)#" id="dropposition" method="post">
                <input id="pos_id" type="hidden" name="pos_id" value="#rc.pos_id#">
                <input id="ThetourID" type="hidden" name="ThetourID" value="0"> 
              </cfoutput>
                <fieldset>
                  Click anywhere outside of this window to cancel.
                  <div class="pull-right">
                    <input type="submit" id="removethisposition" class="btn btn-danger" value="Remove Assignment">
                  </div>
                </fieldset>
            </form> 

                 <script>
                      $('#removeassignment').submit(function(){
                          $('#removethisposition').val('Removing...');
                          $('input[type=submit]', this).attr('disabled', 'disabled');
                      });
                </script>              
          </div> <!-- end of well -->
      </div>
  </div>


    <!-- modal window content, the id of the containing div must match the href on the toggle button -->
<div class="modal fade" id="Delete" tabindex="-1" role="dialog" aria-hedden="true">
  <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
          <h3 id="modalLabel">Delete position IP:a103 ?</h3>
        </div>
        <div class="modal-body">
           <div class="well">

              <form action="" id="dropposition" method="post">
                <input id="pos_id" type="hidden" name="pos_id" value="1605">
                <input id="ftfIPNumber" type="hidden" name="ftfIPNumber" value="a103">

                <fieldset>
                  Click anywhere outside of this window to cancel.
                  <div class="pull-right">
                    <input type="submit" id="deletethisposition" class="btn btn-danger" value="Delete Position">
                  </div>
                </fieldset>
            </form> 
               <script>
                    $('#dropposition').submit(function(){
                        $('#deletethisposition').val('Deleting...');
                        $('input[type=submit]', this).attr('disabled', 'disabled');
                    });
                </script> 
          </div> <!-- end of well -->
        </div>
        </div>
      </div>
  </div>

<!-- This is the code that activates the modals I do have a page that has two separate modals that work on the same page together however, unless I remove id="RemoveCandidate" id="Delete" will not work -->

这是激活模式的代码 我确实有一个页面有两个单独的模式，它们在同一页面上一起工作，但是，除非我删除 id="RemoveCandidate"id="Delete"将不起作用

也请原谅一些变量周围的#。它是用 ColdFusion 编写的

Answer 1

1) 你有 aria-hedden 而不是 aria-hidden

2) 你没有正确关闭你的 div、form 和 fieldset 标签

3) 您根本没有设置打开 RemoveCandidate 的按钮

试试这个:

<div class="col-xs-9"align="left">
  <h3>Edit Position</h3>
</div>	
<div class="col-xs-12">
    <div class="row">
        <div class="col-xs-9">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#pane1" data-toggle="tab">Details</a></li>
                </ul>
                <div class="tab-content">
                    <div id="pane1" class="tab-pane active">
                        <div class="well"> 
                            <fieldset> 
                                <label class="control-label" for="SN">S/N:	              		</label>
                                <div class="controls"><input id="SN" type="text" value="1605" class="form-control input-md" name="SN" disabled /></div>
                                <div class="pull-right"><input type="submit" id="SavePosition"  class="btn btn-success" value="Update Position" /></div>
                                <div class="pull-centered">
                                    <a class="btn btn-danger" data-target="#Delete"  ID="DeletePosButton" role="button" data-toggle="modal">Delete Position</a> 
                                </div>
                            </fieldset>
                        </div><!-- /.well -->
                    </div> <!-- panel -->
                </div><!-- tab -->
            </div><!-- tabable -->
        </div><!-- col -->
    </div><!-- row -->
<!-- modal window content, the id of the containing div must match the href on the toggle button -->
<div class="modal" id="RemoveCandidate" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
          <h3 id="modalLabel"><cfoutput>Remove the current assignment?</cfoutput></h3>
        </div>
        <div class="modal-body">
           <div class="well">
               <form action="#event.buildlink(rc.RemoveTourAssignment)#" id="dropposition" method="post">
                 <cfoutput>
                     <input id="pos_id" type="hidden" name="pos_id" value="#rc.pos_id#" />
                     <input id="ThetourID" type="hidden" name="ThetourID" value="0" /> 
                  </cfoutput>
                <fieldset>
                  Click anywhere outside of this window to cancel.
                  <div class="pull-right">
                      <input type="submit" id="removethisposition" class="btn btn-danger" value="Remove Assignment" />
                  </div>
                   </fieldset>
               </form>
            </div> <!-- end of well -->
          </div>
      </div>
    </div>
</div>


    <!-- modal window content, the id of the containing div must match the href on the toggle button -->
<div class="modal fade" id="Delete" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
                <h3 id="modalLabel">Delete position IP:a103 ?</h3>
            </div>
            <div class="modal-body">
                <div class="well">
                    <form action="" id="dropposition" method="post">
                        <input id="pos_id" type="hidden" name="pos_id" value="1605" />
                        <input id="ftfIPNumber" type="hidden" name="ftfIPNumber" value="a103" />
                        <fieldset>
                            Click anywhere outside of this window to cancel.
                              <div class="pull-right">
                                  <input type="submit" id="deletethisposition" class="btn btn-danger" value="Delete Position" />
                              </div>
                           </fieldset>
                    </form>
                </div> <!-- end of well -->
            </div>
        </div>
    </div>
    </div>

  

我没有更改有关 RemoveCandidate 的任何内容，但如果您在 fiddle 中使用此 HTML，删除按钮应该可以使用。