it-swarm.com.de

Bootstrap-Modals: Öffnen mit onClick = ""

Ich muss in der Lage sein, ein Twitter-Bootstrap-Modalfenster mit der onClick=""- oder einer ähnlichen Funktion zu öffnen. Sie brauchen nur den Code, um in den onClick="" zu gelangen. Ich versuche ein klickfähiges div zu erstellen, um das Modal zu öffnen.

Code-Auszüge:

Div-Code:

<div class="span4 proj-div" onClick="open('GSCCModal');">

Modaler Div-Code:

<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Javascript:

function open(x){
    $(x).modal('show');
}
24
Snappawapa

Sie brauchen keinen Onclick. Angenommen, Sie verwenden Bootstrap 3 Bootstrap 3-Dokumentation

<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>

<div id="GSCCModal" class="modal fade" 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">&times;  </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>

Wenn Sie Bootstrap 2 verwenden, folgen Sie der Markierung hier: http://getbootstrap.com/2.3.2/javascript.html#modals

36
BriAnna

Ich habe nach der Option onClick gesucht, um den Titel und den Hauptteil des Modals basierend auf dem Element in einer Liste festzulegen. Die Antwort von T145 hat mir sehr geholfen, deshalb wollte ich mitteilen, wie ich sie benutzt habe. 

Stellen Sie sicher, dass das Tag, das die JavaScript-Funktion enthält, vom Typ Text/Javascript ist, um Konflikte zu vermeiden:

<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {

   /*
    * '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
    * the modal HTML code that hold the title and body respectively. These id's
    * can be named anything, just make sure they are added as necessary.
    *
    */

   $('#myModalTitle').html(myTitle);
   $('#myModalBody').html(myBodyHtml);

   $('#myModal').modal('show');
}</script>

Diese Funktion kann jetzt in der onClick-Methode aus einem Element wie einer Schaltfläche aufgerufen werden:

<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
11
Ash

Zuerst muss eine JavaScript-Funktion erstellt werden, die das enthält, was Sie tun möchten:

function print() { console.log("Hello World!") }

und dann muss diese Funktion in der onClick-Methode aus einem Element heraus aufgerufen werden:

<a onClick="print()"> ... </a>

Weitere Informationen zu modalen Interaktionen finden Sie direkt in der Bootstrap 3-Dokumentation, die Sie hier finden: http://getbootstrap.com/javascript/#modals

Ihre modale Bindung ist auch falsch. Es sollte ungefähr so ​​sein, wobei "myModal" = ID des Elements:

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

Mit anderen Worten, wenn Sie wirklich behalten wollen, was Sie bereits haben, setzen Sie ein "#" vor GSCCModal und sehen, ob das funktioniert.

Es ist auch nicht sehr klug, wenn ein onClick an ein div-Element gebunden ist. so etwas wie ein Knopf wäre besser geeignet.

Hoffe das hilft!

0
T145

Ich hatte das gleiche Problem, nachdem ich viel recherchiert hatte, baute ich endlich eine js-Funktion auf, um Modals dynamisch auf Basis meiner Anforderungen zu erstellen. Mit dieser Funktion können Sie Popups in einer Zeile erstellen, z.

puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})

Oder Sie können andere komplexe Funktionen wie Iframes, Video-Popups usw. verwenden.

Finden Sie es auf https://github.com/aybhalala/puymodals Für die Demo gehen Sie zu http://pateladitya.com/puymodals/

0
Adi.P