Twitter Bootsrap 3 мода не работает

Question

У меня есть страница, которая отображает два потенциальных модала. Один (и этот работает) отображается только после того, как пользователь выполняет определенную функцию. Другой, предложит пользователю и спросит, хотят ли они удалить позицию.

Вот скрипка, что у меня есть установка:

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 = "Удалить" не будет работать

Также извините #'s around som е переменных. Это написано в ColdFusion

Answer 1

1) У вас есть ария-Хеддны вместо арии скрытой

2) Вы не закрываете свой Div, форму, и Fieldset тегов правильно

3) Вы не имеют кнопку установить, чтобы открыть RemoveCandidate на всех

Попробуйте это:

<div class="col-xs-9"align="left"> 
 
    <h3>Edit Position</h3> 
 
</div> \t 
 
<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: \t    \t \t </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, но кнопка Delete должна работать, если вы используете этот HTML-код в своей скрипке.