Heim > Artikel > Web-Frontend > So verwenden Sie den Bootstrap-Übergangseffekt. Übergangsmodalbox (Modal)

So verwenden Sie den Bootstrap-Übergangseffekt. Übergangsmodalbox (Modal)

高洛峰Original: 2017-03-20 14:02:201918Durchsuche

In diesem Artikel wird hauptsächlich der Bootstrap Übergangsmodalkasten (Modal) vorgestellt, der sehr gut ist und einen Referenzwert hat. Freunde, die ihn benötigen, können darauf verweisen

Sie können den ausgeblendeten Inhalt des modalen Plug-Ins wechseln:

1. Über das Datenattribut: auf dem

Controller-Element (z. B. Button oder Link) Legen Sie das Attribut fest und legen Sie data-toggle="modal" oder data-target="#identifier" fest, um das spezifische modale Feld anzugeben, das umgeschaltet werden soll (mit id="identifier") href="#identifier" rel="external nofollow"

2 Durch

Javascript : Mit dieser Technik können Sie ein Modal mit id="identifier" mit einer einfachen Javascript-Zeile aufrufen:

$(&#39;#identifier&#39;).modal(options)

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Bootstrap-模态框Modal</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >  
  </head> 
  <body> 
  <p class="container"> 
    <h2>创建模态框（Modal）</h2> 
    <!-- 按钮触发模态框 --> 
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> 
    <!-- 模态框（Modal） --> 
    <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <p class="modal-dialog"> 
        <p class="modal-content"> 
          <p class="modal-header"> 
            <button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button> 
            <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> 
          </p> 
          <p class="modal-body"> 
            在这里添加一些文本 
          </p> 
          <p class="modal-footer"> 
            <button type="button" class="btn btn-default"data-dismiss="modal">关闭</button> 
            <button type="button" class="btn btn-primary">提交更改</button> 
          </p> 
        </p><!-- /.modal-content --> 
      </p><!-- /.modal --> 
    </p> 
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

So verwenden Sie den Bootstrap-Übergangseffekt. Übergangsmodalbox (Modal)

Hinweis:

aria-labelledby="myModalLabel" aria-hidden="true"

Offizielle

API bedeutet, dass die Rolleneinstellung für Blinde oder einige lesbare Geräte dem Gerät mitteilt, dass es sich um eine Popup-Box handelt -labelledby=".." enthält die Beschreibungsinformationen und aria-hidden="true" verbirgt sie. Die meisten Leute werden sie nicht verwenden.

Verbessern Sie die Sichtbarkeit der Barrierefreiheit der Modalbox

Fügen Sie unbedingt die Attribute

und role="dialog" zu .modal hinzu, um auf die Titelleiste der Modalbox zu verweisen. Fügen Sie das Attribut aria-labelledby="..." zu .modal-dialog hinzu. aria-hidden="true"

Darüber hinaus sollten Sie über das aria-describedby-Attribut auch beschreibende Informationen zur Modalbox .modal hinzufügen.

Rendering

So verwenden Sie den Bootstrap-Übergangseffekt. Übergangsmodalbox (Modal)

Verwandte Artikel:

Detaillierte Erläuterung, wie Bootstrap das Grundlayout implementiert

Analyse der Verwendung der BootStrap-Tabelle

JS-Komponente Bootstrap Table Tabellenzeilen-Drag-Effekt-Implementierungscode

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Bootstrap-Übergangseffekt. Übergangsmodalbox (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

Vorheriger Artikel：Erstellen Sie Beispielcode mit Bootstrap-FormularenNächster Artikel：Erstellen Sie Beispielcode mit Bootstrap-Formularen

In Verbindung stehende Artikel

Mehr sehen