Wie Modal Popup auf die Schaltfläche klicken öffnen

Question

Ich habe diesen Link-Button:

<a href="javascript: void(0)"><button class="btn btn-primary pull-right" id="btn">Read More</button></a> 

Ich möchte onclick Hit, ein Modal Popup mit allen Artikel erscheint details.I viel bis jetzt versucht, aber nichts läuft richtig. Irgendwelche Ideen?

AKTUALISIERT

$(document).ready(function() { 
$('#dialog').dialog({ 
    autoOpen: false 
}) 
$('#btn').click(function() { 
    $("#dialog").dialog({ 
     modal: true, 
     height: 600, 
     width: 500, 

     buttons: { 
      Accept: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
    $('#dialog').dialog('open'); 
}); 
}); 

AKTUALISIERT (Bild)

Answer 1

denke ich, das Hauptproblem mit diesem Code ist:

<a href=""> 

Da es kein Wert in href ist, Wenn Sie also auf die Schaltfläche klicken, wird auf das Anker-Tag und die Seite geklickt wird aktualisiert. Sie können dies verwenden:

<a href="javascript:void(0);"> 

Oder über die Klickfunktion können Sie das Ereignis abrufen und preventDefault verwenden.

Hoffe, das wird Ihnen helfen. Danke.

Answer 2

Wenn Sie Bootstrap verwenden, finden Sie unter Beispiel

<div class="modal fade" id="modelWindow" role="dialog"> 
      <div class="modal-dialog modal-sm vertical-align-center"> 
       <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Heading</h4> 
       </div> 
       <div class="modal-body"> 
        Body text here 
       </div> 
       <div class="modal-footer"> 
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> 
       </div> 
       </div> 
      </div> 
     </div> 



$('#btn').click(function() { 
    $('#modelWindow').modal('show'); 
});