2017-07-17 20 views
0

Ich teste gerade website modale Fenster und wie du siehst, werden die Mods beim Klicken/Tippen auf den Play Button umgeschaltet.Bootstrap Modal: mache die ganzen Spalten klickbar

Meine Frage ist: ist es möglich, die Spalten anklickbar zu machen und die Modale offen zu machen?

Ich habe versucht, auch eine Daten-Toggle für das gesamte div mit dem Datenziel zu definieren, ohne irgendwelche Ergebnisse.

Dies ist der HTML-Code:

<!-- Button trigger modal --> 
<i class="fa fa-play btn btn-lg" aria-hidden="true" type="button" data-toggle="modal" data-target="#myModal"></i> 
</div> 
<!-- Modal --> 
<div class="modal fade modal-video" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog modal-lg" 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">Title 1</h4> 
    </div> 
    <div class="modal-body"> 
     <video controls="" width="100%" id="video"> 
     <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"> 
     </video> 
     <div class="modal-text"> 
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> 
     </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn button-eh-magenta">Go to Shop</button> 
    <a href=""><button type="button" class="btn button-eh-magenta">Share</button></a> 
    </div> 
</div> 

Antwort

0

Sie können eine ID für Ihre div zuweisen, die Sie auf diesem offenen modale auf Sie klicken, und wie dies tun:

$('#specified_div').click(function(){ 
    $('#targetmodal').modal(); 
}); 

Eine andere Möglichkeit besteht darin, jedem gewünschten Element data-toggle="modal" und hinzuzufügen, indem Sie auf das Element modal mit der IDklickengeöffnet.


und ist hier Bootstrap-Website Zitat:

Via Datenattribute

Aktivieren eines modalen ohne JavaScript zu schreiben. Setzen Sie data-toggle="modal" auf ein Controller-Element, wie eine Schaltfläche, zusammen mit einem data-target="#foo" oder href="#foo", um ein bestimmtes modales auf Toggle zu zielen.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button> 

Via JavaScript

Call a modal mit id myModal mit einer einzigen Zeile JavaScript:

$('#myModal').modal(options) 
+0

Hallo, ich bereits versucht, mit assign Daten-Toggle und Daten -target zu einem div aber die Ergebnisse sind, dass es nicht möglich ist, das modale zu schließen. – Roxana

+0

Haben Sie einen Fehler in der Konsole? –

+0

Keine Fehler. Sie können es sich ansehen, ich habe für die erste Spalte das Datenziel und die Daten angehängt, wie Sie vorgeschlagen haben. Es passiert, dass das Modal nicht schließt. http://cms.nowcommu.myhostpoint.ch/ – Roxana