Ich habe eine Seite mit mehreren Bootstrap Modals mit:
%Vor%Das Problem ist, ich habe eine ganze Tabellenzeile, die anklickbar ist, wie
%Vor%Der modale Inhalt befindet sich in einer anderen versteckten Tabellenzeile direkt darunter, gefolgt von der nächsten anklickbaren Zeile und so weiter. Jetzt enthält diese Zeile auch eine Schaltfläche, die bei einem Klick auf eine andere Seite wechselt.
Ich brauche die gesamte Zeile anklickbar, so dass sie das Modal öffnet, außer wenn die Schaltfläche zum Aufrufen der anderen Seite angeklickt wird, dann muss ich das Modal vom Öffnen abhalten.
Ich brauche so etwas
%Vor%Aber darauf ausgerichtet:
%Vor%Ich habe auch versucht, dem TR eine Klasse von "modaltoggle" zu geben und sie dann mit dem Javascript als .modaltoggle aufzurufen, aber das hat auch nicht funktioniert.
Fügen Sie eine Art Bezeichner für das Element hinzu, das nicht modal ausgelöst werden soll, beispielsweise eine Klasse wie no-modal , und fügen Sie dann in Ihrem jQuery Code für das show.bs.modal -Ereignis des Modales hinzu. Erfassen Sie das relatedElement, das das Ereignis ausgelöst hat, und sehen Sie, ob es die gesuchte Klasse enthält. Wenn dies der Fall ist, führen Sie e.stopPropegation() .
jQuery :
%Vor%HTML :
%Vor% Wie Sie sehen können, hat die zweite Schaltfläche eine Klasse namens no-modal . Wenn geklickt wird, sucht jQuery nach der Existenz dieser Klasse und wenn sie existiert, verhindert sie, dass das Modal springt. Wenn Sie auf die erste Schaltfläche klicken, wird das Modal normal angezeigt, weil es diese Klasse nicht enthält.
Bootstrap-Modale lösen bestimmte Ereignisse aus, wenn sie von einem Element auf der Seite ausgelöst werden, von dem Moment an, in dem sie ausgelöst werden, bis zum vollständigen Auftauchen. Sie können über diese Ereignisse lesen, um eine Vorstellung davon zu bekommen, wofür Sie sie verwenden können, indem Sie den Abschnitt Ereignisse für die Bootstrap-Modalitäten überprüfen in der offiziellen Dokumentation.
Hier ist ein JSFiddle, um zu demonstrieren, was ich erklären werde: Ссылка
Wie MattD erklärt und demonstriert hat, ist es ziemlich einfach, das Starten eines Modales zu verhindern, obwohl sein Beispiel für die Modal-Standardanwendung gilt. Da Sie in Ihrem Skriptcode .btn verwenden, nehme ich an, dass Sie ihn auf alle Ihre fraglichen Schaltflächen angewendet haben. Ich habe auch angenommen, dass Sie den Modal-Code ähnlich wie auf der Bootstrap-Demo-Seite behalten haben. Wenn Sie Ihren tatsächlichen Tabellencode angeben, kann ich ihn speziell auf das, was Sie bereits haben, anpassen.
Hinweis: Ich habe DIV , das normalerweise als äußerer Wrapper des Modales für TD fungieren würde, ersetzt und einen Leckerbissen von CSS hinzugefügt, um die Trennung im Inhalt etwas einfacher zu machen.
Wenn Sie eine Klasse verwenden, die auf alle Schaltflächen angewendet wird, müssen Sie keine Funktion für jede einzelne ID schreiben. Nachdem ich das gesagt habe, empfehle ich eine benutzerdefinierte Klasse als Auslöser zu verwenden. .btn ist eine Standardklasse innerhalb des Bootstrap-Kerns. Versuchen Sie also .modalBtn zu verwenden, um Konflikte mit der legitimen Bootstrap-Funktionalität zu vermeiden.
Hoffe, das hilft. ^^
Tags und Links javascript html jquery css twitter-bootstrap