即使點擊其他按鈕，模態依然彈出

-2

當我點擊編輯按鈕時，彈出編輯信息的模態，但當我關閉它並點擊添加條目按鈕時，編輯模式仍然彈出。有任何想法嗎？即使點擊其他按鈕，模態依然彈出

<div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button> 

              <h5 class="modal-title" id="myModalLabel">Add a medicine</h5> 
             </div> 
             <div class="modal-body"> 
              <form enctype="multipart/form-data" id="modal_form_id" method="POST"> 
               <div class="form-group"> 
               <label class="control-label mb-10">Generic Name</label> 
               <select class="form-control" name="medicine_id" id="medicine_id"> 
                @foreach($items as $item) 
                <option value="{{$item->id}}" >{{$item->generic_name}}</option> 
                @endforeach 
               </select> 
              </div> 

              <div class="form-group" id="form-group-dosage_name"> 
               <label class="control-label mb-10">Dosage Volume</label> 
               <input type="text" name="dosage_name" id="dosage-volume" class="form-control" placeholder="Example: 20mg"> 
               <span class="help-block"></span> 
              </div> 

              <div class="form-group" id="form-group-form"> 
               <label class="control-label mb-10">Form</label> 
               <input type="text" name="form" id="form-dosage" class="form-control" placeholder="Bottle, Tablet"> 
               <span class="help-block"></span> 
              </div> 

              <div class="form-group" id="form-group-price"> 
               <label class="control-label mb-10">Price Per piece</label> 
               <input type="text" name="price" id="price" class="form-control" placeholder="Price"> 
               <span class="help-block"></span> 
              </div> 

              <div class="form-group" id="form-group-photo"> 
               <label class="control-label mb-10">Insert a photo</label> 
               <div class="panel-wrapper collapse in"> 
                <div class="panel-body"> 
                <div class="mt-20"> 
                 <input type="file" name="photo" id="input-file-now" class="dropify" > 
                </div> 
               </div> 
              </div> 
              <span class="help-block"></span> 
             </div> 
             {{ csrf_field() }} 
            </form> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" id="action_button" class="btn btn-success waves-effect" id="save-dosage">Save</button> 
            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Cancel</button> 
           </div> 
          </div> 
          <!-- /.modal-content --> 
         </div> 
        </div>

所以這對於模態

來源

2017-02-20 d3cypher

我們需要真的看到一些代碼。一個可能的原因可能是你在每個按鈕上設置了相同的模式目標。 –

聽起來像無效的HTML，讓它驗證。另外，給我們展示一下，這樣我們就可以更深入地探究這個問題。 – Roberrrt

基本上它的名爲myModal的id。 – d3cypher

通常情況下，代碼，發生這種情況的原因是身份證的名字是無論是在這些情況下，雙方發生衝突或多餘的。

首先，錯誤的目標（注意的data-target="#myModal"）：

// --------------------------------- Here 
<button type="button" data-target="#myModalAdd" class="btn btn-primary btn-lg" data-toggle="modal" > 
Open Modal 
</button> 
// --------------------------------- Here 
<button type="button" data-target="#myModalEdit" class="btn btn-primary btn-lg" data-toggle="modal" > 
Open Modal 
</button>

所有你需要做的是，確保data-target屬性target正確的模式對話框（模式對話框可以通過使用ID，例如可以區分： <div id="myModalAdd" .....>

二，你直接從JS代碼調用/編程就像這樣：

$('#myModalAdd').modal('show'); // or 
$('#myModalEdit').modal('show');

請確保$(<modal's ID>)選擇器在這種情況下是正確的。

來源

2017-02-20 09:39:15

是的，如果我只是分開我的模式 – d3cypher

當然，將它分開以便將來的可讀性和維護。畢竟，它取決於用例 –

即使點擊其他按鈕，模態依然彈出

回答

相關問題