Aufruf Bootstrap Modal von Bootstrap Popover

Question

Ziel: Ich möchte ein Bootstrap-Modal von einem Bootstrap-Popover aufrufen. Ich schaute auf Calling a modal from a Bootstrap popover und versuchte, den Code zu implementieren.

Problem: Wenn Sie auf die Schaltfläche klicken, die das Modal aus dem Popover auslöst, wird der Hintergrund dunkler, aber es erscheint kein Modal. Nicht sicher, was das Problem genau ist. Der Code, den ich aus dem verlinkten Artikel probiert habe, führt zu dem gleichen Ergebnis, als würde ich nur die Schaltfläche zum Auslösen eines Modals ohne den Vorschlag von jQuery in diesem Artikel einrichten. Derzeit ist mein Code so eingerichtet, dass er den dort vorgeschlagenen Ratschlag verwendet was habe ich bisher ...

Vielen Dank im Voraus zu allen helfen.

$(function() { 
     $('[data-toggle="popover"]').popover({ 
     html: true, 
     content: function() { 
      return $('#popover-content').html(); 
     } 
     }); 

     $(document).on('click', "#messageUser", function() { 
      console.log('Clicked message button'); 
      $('#messageUserModal').modal('show'); 
     }); 
    }); 

    /* --Tried this too, thinking the popover and modal were fighting 
    $(function() { 
     $('#messageUser').click(function() { 
      console.log('Clicked message button'); 
      //$('[data-toggle="popover"]').hide(); 
      $('#messageUserModal').modal('show'); 
      //$('#messageUserModal').show(); 
     }); 
    }); 
    */ 

HTML/PHP/BS

<button class='btn btn-xs btn-primary' type='button' id='messageUser'>Send Message</button> 
       </form> 

       <div class='modal fade' id='messageUserModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'> 
        <div class='modal-dialog' role='document'> 
        <div class='modal-content'> 
         <div class='modal-header'> 
         <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button> 
         <h4 class='modal-title' id='myModalLabel'>Send Message to ".$helperName." </h4> 
         </div> 
         <div class='modal-body'> 
         <textarea class='form-control' name='message' maxlength='749' rows='10' cols='50' placeholder='Enter message to ".$helperName." here..'></textarea><br> 
         </div> 
         <div class='modal-footer'> 
         <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
         <button type='button' class='btn btn-primary'>Send Message</button> 
         </div> 
        </div> 
        </div> 
       </div> 

Answer 1

fand ich die Antwort auf das Problem .. Ich dachte, dass ich versuchen sollte, den Modal von außerhalb des popover zu nennen (dh eine Taste irgendwo auf der Seite zu drücken, um das modale zu nennen, nur um zu sehen, ob das Problem zum Popover isoliert wurde, wie ich ursprünglich abgeschlossen hatte ..). Sobald ich den gleichen Knopf an anderer Stelle hinzugefügt habe, ist nichts passiert. Ich erkannte dann, dass der Code für das Modal im Popover war, also nahm ich diesen Code und legte ihn außerhalb des Popover. Als ich dann auf die neue Schaltfläche klickte, sah ich, dass ein Modal wie erwartet kam, aber dann klickte ich auf den ursprünglichen Button, mit dem ich versuchte, das Modal zu nennen, und es löste dann auch das Modal aus Das Popover wird abgefeuert, es muss das Modal ausgeführt werden, aber niemals wird es oder etwas in diesem Ausmaß gezeigt. Daher entferne ich den Code für das Modal außerhalb des Popover-Codes und es wird gut funktionieren. Lange um sich schlagende Antwort, aber hoffentlich hilft die Reise, um zu der Antwort zu kommen, auch jemand anderem.

Auch wichtig zu beachten, wenn mit Bootstrap-3 Sie brauchen keine Phantasie jQuery-Code zu schreiben, um die modalen zu zeigen, oder was auch immer der Vorschlag aus dem Artikel war ich am Anfang der Post verwiesen ..