wake-up-neo.com

verhindern, dass Bootstrap-Modal geöffnet wird, wenn eine Schaltfläche angeklickt wird

Ich habe eine Seite mit mehreren Bootstrap-Modalen mit:

data-toggle="modal" data-target="#modal-12345"

Das Problem ist, ich habe eine ganze Tabellenzeile, die anklickbar ist, wie

<tr data-toggle="modal" data-target="#modal-12345">

Der modale Inhalt befindet sich in einer anderen ausgeblendeten Tabellenzeile direkt darunter, gefolgt von der nächsten anklickbaren Zeile usw. Nun enthält diese Zeile auch eine Schaltfläche, die beim Klicken auf eine andere Seite wechselt.

Ich muss die gesamte Zeile anklickbar machen, damit das Modal geöffnet wird. Wenn Sie jedoch auf die Schaltfläche klicken, um zur anderen Seite zu gelangen, muss das Modal nicht mehr geöffnet werden.

Ich brauche so etwas

<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>

Aber darauf zielen:

data-toggle="modal"

Ich habe auch versucht, dem TR eine Klasse "modaltoggle" zu geben und ihn dann mit dem Javascript als .modaltoggle zu bezeichnen, aber das hat auch nicht funktioniert.

11
user1227914

Fügen Sie eine Art Bezeichner für das Element hinzu, das Sie nicht auslösen möchten, z. B. eine Klasse wie no-modal. Fügen Sie dann in Ihrem jQuery-Code Code für das show.bs.modal-Ereignis des Modals hinzu. Erfassen Sie das relatedElement (das Element, das das Ereignis ausgelöst hat), und prüfen Sie, ob es über die Klasse verfügt, nach der Sie suchen. Wenn dies der Fall ist, führen Sie e.stopPropagation() aus.

BOOTPLY

jQuery:

$('#myModal').on('show.bs.modal', function (e) {
  var button = e.relatedTarget;
  if($(button).hasClass('no-modal')) {
    e.stopPropagation();
  }  
});

HTML:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" 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-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal Header</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>

Wie Sie sehen, hat die zweite Schaltfläche eine Klasse namens no-modal. Wenn Sie darauf klicken, prüft die jQuery, ob diese Klasse vorhanden ist, und verhindert, dass die Modal-Klasse vorhanden ist. Wenn Sie auf die erste Schaltfläche klicken, wird der Modal normal angezeigt, da diese Klasse nicht vorhanden ist.

Bootstrap-Modals lösen bestimmte Ereignisse aus, wenn sie von einem Element auf der Seite ab dem Moment, an dem sie ausgelöst werden, durch den Moment ausgelöst werden, an dem sie vollständig aufgetaucht sind. Informationen zu diesen Ereignissen finden Sie in der offiziellen Dokumentation unter Events Bootstrap-Modals.

12
MattD

Hier ist eine JSFiddle-Demo, die ich erkläre: http://jsfiddle.net/68y4zb3g/

Wie MattD erklärt und demonstriert hat, ist das Starten eines Modals relativ einfach, obwohl sein Beispiel für modale Standardanwendungen gilt. Da Sie den .btn in Ihrem Skriptcode verwenden, gehe ich davon aus, dass Sie ihn auf alle fraglichen Schaltflächen angewendet haben. Ich habe auch angenommen, dass Sie den Modalcode ähnlich wie auf der Bootstrap-Demoseite beibehalten haben. Wenn Sie Ihren aktuellen Tabellencode angeben, kann ich ihn speziell an das anpassen, was Sie bereits haben.

$('tr .btn').on('click', function(e) {
   e.stopPropagation();
});
td {
    border: 1px #000000 solid;
    padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<table>
    <tr data-toggle="modal" data-target="#modal-12345">
        <td>Launch modal 12345</td>
        <td><button id="btn-12345" class="btn">12345</button></td>
    </tr>
    <tr>
        <td colspan="2" class="modal fade" id="modal-12345" 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-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        12345
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

Hinweis: Ich habe die Variable DIV ersetzt, die normalerweise als äußere Hülle des Modals für die Variable TD fungiert, und ein CSS-Bit hinzugefügt, um die Trennung der Inhalte ein wenig zu erleichtern.

Wenn Sie eine Klasse verwenden, die auf alle Schaltflächen angewendet wird, müssen Sie nicht für jede einzelne ID eine Funktion schreiben. Allerdings empfehle ich, eine benutzerdefinierte Klasse als Auslöser zu verwenden. .btn ist eine Standardklasse im Kern von Bootstrap. Versuchen Sie also, .modalBtn zu verwenden, um mögliche Konflikte mit der legitimen Bootstrap-Funktionalität zu vermeiden.

Hoffe das hilft. ^^

14
$('#myModal').on('show.bs.modal', function (e) {
 return e.preventDefault(); 
});

OR

<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
 $(target).modal('show');
}
</script>

e.stopPropagation (); oder e.preventDefault (); Es funktioniert nicht, wenn Sie Modal erneut öffnen oder mehrere Modalitäten auf Ihrer Seite verwenden.

1
Chirag Rathore