PHPトグルモーダルは、より多くのモーダルを作成します

Question

ここは新しいです。私のPHPコードで私のModalに問題がありました。それをクリックするたびに1つ以上のモーダルが作成されます。最初にクリックすると1モーダルしか表示されません。しかし、それを2回目以降にクリックすると、クリックすると増分してより多くのモーダルを作成します。以前のモーダルは閉じていても、クリックされると前のモーダルが表示されます。 一度クリックするとサンプル画像が表示されますSingle Modalこの写真は、2つ以上のモーダルを切り替えるときのサンプルです。ここで

Incrementing Modalはモーダル

<script> 
$(document).ready(function() { 
    function appendHtml(el, str) { 
     var div = document.createElement('div'); 
      div.innerHTML = str; 
     while (div.children.length > 0) { 
      el.appendChild(div.children[0]); 
     } 
    } 

    ModalCustom = function(options) { 

     var html = "<div class='modal fade bs-example-modal-lg' tabindex='-1' role='dialog' aria-hidden='true'> <div class='modal-dialog modal-lg'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span> </button> <h4 class='modal-title' id='myModalLabel'>" + options.Name + "</h4> </div> <div class='modal-body'> <h4></h4> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> <button type='button' class='btn btn-primary'>Save changes</button> </div> </div> </div> </div>"; 
     appendHtml(document.body, html); 
    }; 
}); 
</script> 

Answer 1

問題のjavascriptのモーダルここ

$Query = $this->DBase('Query', array(0 => "SELECT * FROM `factions`")); 
      while ($FACTIONS = $Query->fetch_object()) { 
       $this->FACTION->FACTIONSLIST .= 
       '<tr class="even pointer"> 
        <td width="1%" class="a-center "><input type="checkbox" class="flat" name="table_records"></td> 
        <td width="5%">'. $FACTIONS -> id .'</td> 
        <td>'. $FACTIONS -> Name .'</td> 
        <td width="5%" class="last"> 
         <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg" onclick="new ModalCustom({ 
          Name: \''. $FACTIONS -> Name .'\', 
         });"> 
          &nbsp;<i class="fa fa-pencil"></i> 
         </a> 
         &nbsp;&nbsp;&nbsp;&nbsp; 
         <a href="#" onclick="new TabbedNotification({ 
           title: \'Notification\', 
           text: \'Faction <b>'. $FACTIONS -> Name .'</b> successfully deleted!, page will be updated shortly.\', 
           type: \'error\', 
           sound: true 
         });"> 
           <i class="fa fa-trash-o"></i> 
         </a> 
        </td> 
       </tr>'; 
      } 
      break; 

をトグルコードされているあなたがあればチェックせずに、無条件に追加されアペンド関数内で、おそらくです類似のdivは既に存在します。それを

に変更してください。

 while (div.children.length > 0) { 
      $t = $(el).find(".bs-example-modal-lg"); 
      if($t.length){ 
       $t.replaceWith(div.children[0]); 
      }else{ 
       $(el).appendChild(div.children[0]); 
      } 
     } 

チェックアウトthis questionの回答を参照してください。