Heim  >  Artikel  >  Web-Frontend  >  So deaktivieren Sie das Bootstrap-Modal

So deaktivieren Sie das Bootstrap-Modal

藏色散人
藏色散人Original
2020-12-07 09:41:259676Durchsuche

So schließen Sie das Bootstrap-Modal: 1. Verbinden Sie das Bootstrap-Plug-in. 2. Binden Sie das modale Ereignis an die Schaltfläche. 3. Schließen Sie es manuell über „$('#myModal').modal('hide'); "Methode Nur eine modale Box.

So deaktivieren Sie das Bootstrap-Modal

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.

So schließen Sie Bootstrap Modal manuell:

Informationen zum Schreiben einer Modalbox:

In der offiziellen Dokumentation von Bootstrap erfahren Sie, wie Sie eine Modalbox schreiben. Bootstrap ist wirklich einfach zu bedienen und sehr praktisch! „Mein Code wird unten eingefügt.“ Button

<button class="btn btn-primary btn-lg btn_add" style="display: block;" data-toggle="modal" data-target="#myModal">
一个按钮
</button>

Modalbox:

<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 300px;margin: 0 auto">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    <!-- 模态框(Modal)标题 -->         
                </h4>
            </div>
            <div class="modal-body"> 
                <!-- 在这里添加一些文本 自定义内容-->
                <form>
                 <!-- 在这里添加一些文本 自定义内容-->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn_check">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

Das ist es! Wie im Bild gezeigt, habe ich meine Informationen im Code gelöscht und einige Kommentare hinzugefügt:

So deaktivieren Sie das Bootstrap-Modal

Manuelles Schließen der modalen Box:

Ich möchte den Vorgang realisieren, bei dem der Erfolg des Klicks ermittelt und dann ausgeführt wird Modal-Box verschwindet

Es gibt viele Methoden, nach denen ich schon einmal im Internet gesucht habe, aber sie scheinen nicht einfach zu sein und können mein Problem nicht lösen. Ich habe die Methode „Anzeige: Keine“ ausprobiert, aber sie wird sich beim nächsten Mal auf das Erscheinungsbild der Modal-Box auswirken . Dann habe ich das gelegentlich gesehen $ ('#myModal').modal('hide'); Fügen Sie diesen Satz an der Stelle hinzu, an der die Modalbox geschlossen werden soll. Diese Methode ist perfekt gelöst mein Problem.

Sie müssen noch weitere Dokumente lesen. Die grundlegenden Methoden der Dokumente sind immer noch sehr nützlich „

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn