Heim > Artikel > Web-Frontend > So definieren Sie ein Popup-Menü mit Bootstrap
Einige Menüs müssen angezeigt werden. Ihr Menü befindet sich beispielsweise unten auf der Seite und dieses Menü verfügt über ein Dropdown-Menü aufzutauchen. Im Bootstrap-Framework wird speziell für diesen Effekt ein Klassenname „dropup“ vorgeschlagen. Die Verwendungsmethode ist wie zuvor gezeigt. Sie müssen diesen Klassennamen nur zu „btn-group“ hinzufügen (wenn es sich natürlich um ein normales Popup-Dropdown-Menü handelt, müssen Sie nur den Klassennamen „dropup“ anhängen). zum „Dropdown“-Klassennamen).
Das Bootstrap-Dropdown-Menü öffnet sich intelligent nach oben und unten
1. Anforderungen:
Durch Hinzufügen Zum Bootstrap-Dropdown-Menü Die Dropdown- oder Dropup-Stilklasse kann das Herunter- oder Hochklappen des Menüs realisieren. Auf dynamischen Seiten werden Tabellenelemente im Allgemeinen dynamisch generiert und Dropdown-Menüs werden normalerweise nach unten angezeigt. Wie erreiche ich ein Popup, wenn der untere Teil des Popup-Menüs blockiert ist (nicht vollständig angezeigt werden kann)?
2. Umsetzungsidee:
Ermitteln Sie die Höhe der Klickschaltfläche vom unteren Bildschirmrand und die Höhe des Popup-Menüs vollständig angezeigt werden soll, lassen Sie es auftauchen.
3. Implementierungsprozess:
Durch Ändern des Toggle-Attributs in bootstrap.js wird beim Klicken das Popup entsprechend der tatsächlichen Situation angezeigt. Die Implementierung ist wie folgt:
4. Teil des Testseitencodes:
①: Einführung von js:
<script type="text/javascript" src="../assets/js/jquery.js"></script> <script type="text/javascript" src="../assets/js/bootstrap.js"></script>
②: Dropdown Menülayout:
<div class="btn-group" style="margin:10px auto;"> <button type="button " class="btn btn-default btn-xs dropdown-toggle" data- toggle="dropdown"> <i class="glyphicon glyphicon-cog"></i> <span class="glyphicon glyphicon-menu-down"></span> </button> <ul class="dropdown-menu pull-right" role="menu"> <li><a href="#">基本信息</a></li> <li><a href="#">查看权限</a></li> <li class="divider"></li> <li><a href="javascript:;" οnclick="edit();">修改信息</a></li> <li><a href="#">密码重置</a></li> <li class="divider"></li> <li><a href="#">删除</a></li> <li class="divider"></li> <li><a href="#">禁用</a></li> </ul> </div>
Verwandte Empfehlungen: „Bootstrap-Erste-Schritte-Tutorial“
5. Wirkung
①: Popup nach unten standardmäßig:
②: Wenn der Boden blockiert ist, Popup
<div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" >按钮下拉菜单<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> <li><a href="##">按钮下拉菜单项</a></li> </ul> </div>
Das obige ist der detaillierte Inhalt vonSo definieren Sie ein Popup-Menü mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!