Anzeige Bootstrap Modal mit javascript onClick

Brauche ich um zu öffnen ein Twitter-bootstrap-modal-Fenster mit der onClick="" oder ähnliche Funktion. Brauchst einfach nur den code zu gehen, in die onClick="". Ich bin versucht zu machen, ein klickbares div zum öffnen des modalen.

Code-Auszüge:

Div-Code:

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

Modal 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');
}

Mit onClick ist weitgehend verpönt. Gibt es einen bestimmten Grund konnte Sie nicht, zumindest, enthalten ein Skript in ein <script> tag?
Gibt es einen Grund, Sie nicht verwenden können, die integrierten bootstrap-Funktionalität? (ie: fügen Sie Daten-toggle="modal" und data-target="#foo" auf dein div?)
Ich bin mit dem onClick zu vermeiden, mit links rund um die div. Und dies sind die code-Ausschnitte, nicht wie Sie tatsächlich in den code ein. @BriAnna du meinst auf nicht-modal div-code? Ich wusste nicht, dass Diese alles tun würde, oder könnte ich sogar tun.
Yep. Kann jedes element der anklickbare auslösen. Fügen Sie einfach die beiden Attribute, um Ihre div. Ein a-tag ist nicht erforderlich. Aber dein markup ist nicht richtig. Sie haben zu Folgen, Twitter Bootstrap Beispiel.

InformationsquelleAutor Snappawapa | 2013-11-21

Brauchen Sie nicht ein onclick. Angenommen, Sie sind mit 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 mit Bootstrap 2, würden Sie Folgen Sie den markup-Code hier:
http://getbootstrap.com/2.3.2/javascript.html#modals

Das, sir, ist genau das, was ich brauchte. Ich bin derzeit mit bootstrap 2.3.2, aber es funktioniert immer noch perfekt! Danke!!!
Was ist, wenn ich öffnen Sie das Modell auf eine andere Schaltfläche klicken?
Ich bekomme es. Wie öffnet man eine Bootstrap-modal-Fenster mit jQuery?

InformationsquelleAutor BriAnna

Ich war auf der Suche für das onClick-option, um die Titel und Textkörper der modal basiert auf dem Element in einer Liste. T145 Antwort hat mir sehr geholfen, also ich wollte zu teilen, wie ich es benutzt habe.

Stellen Sie sicher, dass der tag mit der JavaScript-Funktion wird der Typ text/javascript, 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 aufgerufen werden, in der onClick-Methode, die von innen ein element wie eine Schaltfläche:

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

Fehlt eine schließende Anführungszeichen herstellersignet in den <script ...> - tag...

InformationsquelleAutor Ash

0

Einer JavaScript-Funktion muss zuerst gemacht werden, die hält, was Sie wollen, gemacht zu werden:
```
function print() { console.log("Hello World!") }
```
und dann muss diese Funktion aufgerufen werden, in der onClick-Methode, die von innen ein element:
```
<a onClick="print()"> ... </a>
```
Erfahren Sie mehr über modale Interaktionen direkt aus der Bootstrap-3-Dokumentation finden Sie hier:
http://getbootstrap.com/javascript/#modals

Ihre modalen binden, ist auch falsch. Es sollte so etwas wie dieses, wo "myModal" = ID des Elements:
```
$('#myModal').modal(options)
```
In anderen Worten, wenn Sie wirklich wollen, zu halten, was Sie bereits haben, setzen Sie ein "#" vor GSCCModal und sehen, ob das funktioniert.

Ist es auch nicht sehr klug, haben ein onClick an ein div-element; so etwas wie ein button wäre besser geeignet.

Hoffe, das hilft!
- Leider löst das noch nicht das problem.. Selbst mit dem twitter bootstrap-Funktionen, Die am weitesten bekomme ich einen leeren Bildschirm. Ich werde das update auch meine anfängliche Frage mit dem code arbeite ich zurzeit mit
- Sehen Sie, wenn die Eingabe-Assistent
InformationsquelleAutor T145
0

Ich hatte das gleiche problem, nach einiger recherche, eine Menge, die ich schließlich baute eine js-Funktion zum erstellen von modals dynamisch basierend auf meine Bedürfnisse. Mit dieser Funktion können Sie erstellen, popups in einer Zeile wie:
```
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
```
Oder Sie können andere komplexe Funktionen wie iframes, video-popups, etc.

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

InformationsquelleAutor Adi.P

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.