Verwendung der Bootstrap-Modalbox

Verwendung der modalen Bootstrap-Box: 1. Legen Sie über das Datenattribut gleichzeitig den Selektorinhalt „data-target="#myModal" fest. 2. Verwenden Sie über js direkt den Code „$(‘#myModal‘“. .modal( Optionen)" usw.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, Dell G3-Computer.

Bootstraps Modal-Box

Wenn Sie nur die Modal-Box-Funktion verwenden möchten, können Sie modal.js und Bootstrap-CSS separat einführen. Im Bootstrap-Paket können Sie bootstrap.js einführen.

Verwendung

1. Verwenden Sie das Datenattribut, z. B. das Festlegen von data-toggle='"modal" einer Schaltfläche, und legen Sie den Inhalt des Selektors data-target="#myModal" fest.

2. Verwenden Sie es direkt über js Code $('#myModal').modal(options)

3. Die Modalbox besteht hauptsächlich aus drei Teilen: Modellkopf, Modalkörper, Modellfußzeile. Der Hauptinhalt wird im Körper angezeigt , class="close" ist ein schließender modaler Stil.

4. Mehrere gängige Methoden $('#identifier').modal('toggle') Wechseln Sie den Status der Modalbox

   $('#identifier').modal('show') Zeigen Sie die Modalbox an

   $( '#identifier').modal('hide') Modalfeld ausblenden

Event	Function	Usage
show.bs.modal	Nach dem Aufruf des Show-Methodentriggers.	$('#myModal').on('show.bs.modal',function () {alert("Show modal box");});
shown.bs.modal	ruft Triggered auf After-Show-Methode.	$('#myModal').on('shown.bs.modal', function () {alert("Modal vollständig anzeigen"); });
hide.bs.modal	on Ausgelöst nach Aufruf der Methode hide.	$('#myModal').on('hide.bs.modal', function () {alert("hide modal box");});
hidden.bs.modal	ruft ausgelöst auf nach der Hide-Methode.	$('#myModal').on('hidden.bs.modal', function () {alert("Modal vollständig ausblenden"); });

Verwenden Sie Schritt zwei

1. Führen Sie die folgenden drei Dateien der Reihe nach ein

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script sype="text/JavaScript" src="./jquery.min.js"></script>
<script sype="text/JavaScript" src="../js/bootstrap.min.js"></script>

2. Kopieren Sie den folgenden Code auf der Seite

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</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-hidden="true">&times;</button>
                <h4 class="modal-title text-center" id="myModalLabel">标题是什么</h4>
            </div>
            <div class="modal-body">
                写你HTML文本
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

Einfach, die modale Box benötigt einen Auslöser, fügen Sie die folgenden Attribute zum HTML-Element hinzu, das die modalen Box-Daten auslöst -toggle="modal" data-target="#myModal"data-toggle="modal" data-target="#myModal"

观察以下就会发现 这个data-target="#myModal"中的myModal就是模态框所在div的id 66cacf8a432b8feb3b3955bbd2e98abf

Beobachten Sie Folgendes und Sie werden feststellen, dass myModal in diesem data-target="#myModal" das modale Feld ist Die ID des Div 45494c476075613582ec4fc787de188e

(Empfohlen: „Bootstrap-Tutorial

》)🎜

Das obige ist der detaillierte Inhalt vonVerwendung der Bootstrap-Modalbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!