Eine kurze Analyse der Verwendung von Modalboxen beim Bootstrap-Lernen

Dieser Artikel führt Sie durch die Modal-Box in Bootstrap und stellt vor, wie Sie die Größe der Modal-Box ändern und Remote-Inhalte in die Modal-Box laden. Ich hoffe, dass er für alle hilfreich ist!

In diesem Tutorial besprechen wir das sehr nützliche Bootstrap-jQuery-Plugin – Modal Box.

Bootstrap Modal ist ein leichtes Mehrzweck-JavaScript-Popup, das anpassbar und reaktionsfähig ist. Sie können damit Warnfenster, Videos und Bilder auf Ihrer Website anzeigen. Mit Bootstrap erstellte Websites können Modalitäten verwenden, um Geschäftsbedingungen (im Rahmen des Registrierungsprozesses), Videos und sogar Social-Media-Widgets anzuzeigen.

Um es besser zu verstehen, werfen wir einen Blick auf die verschiedenen Komponenten der Bootstrap-Modal-Box. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

Die modale Bootstrap-Box ist hauptsächlich in drei Teile unterteilt: Kopfzeile, Textkörper und Fußzeile. Jeder Teil hat seine eigene Bedeutung, daher sollten wir sie richtig verwenden. Wir werden diese später besprechen. Was ist das Spannendste an Bootstrap-Modalen? Sie müssen keinen JavaScript-Code schreiben, um es zu verwenden! Der gesamte Code und die Stile sind von Bootstrap vordefiniert. Sie müssen lediglich die richtigen Tags und Attribute verwenden, um es auszulösen.

Die standardmäßige modale Box

Die standardmäßige modale Box sieht so aus:

Um die modale Box auszulösen, müssen Sie einen Link oder eine Schaltfläche hinzufügen. Das Tag, das das Element auslöst, könnte wie folgt aussehen:

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

Beachten Sie, dass das Link-Element zwei benutzerdefinierte Datenattribute hat: data-toggle und data-target. Der Schalter teilt Bootstrap mit, was zu tun ist, und das Ziel teilt Bootstrap mit, welches Element geöffnet werden soll. Wenn also auf einen solchen Link geklickt wird, erscheint eine modale Box mit der ID „basicModal“. data-toggle和data-target。toggle告诉Bootstrap要做什么，target告诉Bootstrap要打开哪个元素。所以每当点击这样的链接时，都会出现一个id为“basicModal”的模态框。

现在让我们看看定义模态框所需的代码：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

模态框的父div应具有与上述触发元素中使用的相同的ID。在我们的例子中是id="basicModal"。

注意：父模态框元素中自定义属性aria-labelledby和aria-hidden让其可被访问。让所有人都能访问你的网站是一个很好的做法，所以你应该使用这些属性，因为它们不会对模态框的普通功能产生负面影响。

在模态框的HTML代码中，我们可以看到一个封装div嵌套在父模态框div内。这个div的类modal-content告诉bootstrap.js在哪里查找模态框的内容。在这个div内，我们需要放置前面提到的三个部分：头部，正文和页脚。

模态框头部，顾名思义，用于给模态添加一个标题或者如“x”关闭按钮等其他元素。这些元素还应该有一个data-dismiss属性告诉Bootstrap哪个元素要隐藏。

然后我们看一下模态框的正文。可以把它看做一个打开的画布，你可以在其中添加任何类型的数据，包括嵌入YouTube视频，图像或者任何其他内容。

最后，我们看一下模态框的页脚。该区域默认为右对齐。在这个区域，你可以放置“保存”，“关闭”，“接受”等操作按钮，这些按钮与“模态框”需要表现的行为相关联。

改变模态框的大小

之前我提到Bootstrap模态框是响应式的、灵活的。我们将在本节中看到如何更改其大小。

Bootstrap 3.3.7中模态框有两种新的风格：大和小。给divmodal-dialogdiv 添加一个修饰符类modal-lg可以获得一个更大的模态框，添加modal-sm可以获得一个更小的模态框。

使用jQuery激活模态框

模态框是一个jQuery插件，所以如果你想使用jQuery控制模态框的话，你需要在模态框的选择器上调用.modal()

Schauen wir uns nun den Code an, der zum Definieren des Modals erforderlich ist:

$('#basicModal').modal(options);

Das übergeordnete Div des Modals sollte dieselbe ID haben, die im Triggerelement oben verwendet wird. In unserem Fall ist es id="basicModal".

Hinweis: Die benutzerdefinierten Attribute aria-labelledby und aria-hidden im übergeordneten modalen Element machen es zugänglich. Es empfiehlt sich, Ihre Website für jedermann zugänglich zu machen. Daher sollten Sie diese Attribute verwenden, da sie die normale Funktionalität des Modals nicht beeinträchtigen. 🎜🎜Im HTML-Code der modalen Box sehen wir ein Wrapper-Div, das im übergeordneten modalen Box-Div verschachtelt ist. Die Klasse modal-content dieses Div teilt Bootstrap.js mit, wo nach dem Inhalt des Modals gesucht werden soll. Innerhalb dieses Div müssen wir die drei zuvor erwähnten Teile platzieren: Kopfzeile, Textkörper und Fußzeile. 🎜🎜Der Modalbox-Header wird, wie der Name schon sagt, verwendet, um dem Modal einen Titel oder andere Elemente wie eine „x“-Schließen-Schaltfläche hinzuzufügen. Diese Elemente sollten auch über ein data-dismiss-Attribut verfügen, das Bootstrap mitteilt, welches Element ausgeblendet werden soll. 🎜🎜Dann schauen wir uns den Körper der Modalbox an. Betrachten Sie es als eine offene Leinwand, in die Sie jede Art von Daten hinzufügen können, einschließlich eingebetteter YouTube-Videos, Bilder oder anderer Inhalte. 🎜🎜Schauen wir uns zum Schluss noch die Fußzeile des Modals an. Dieser Bereich ist standardmäßig rechtsbündig ausgerichtet. In diesem Bereich können Sie Bedienschaltflächen wie „Speichern“, „Schließen“, „Akzeptieren“ usw. platzieren. Diese Schaltflächen sind mit dem Verhalten verknüpft, das die „modale Box“ zeigen muss. 🎜🎜Ändern Sie die Größe der Modalbox.🎜🎜Ich habe bereits erwähnt, dass Bootstrap-Modalboxen reaktionsschnell und flexibel sind. In diesem Abschnitt erfahren Sie, wie Sie die Größe ändern können. 🎜🎜Die Modalbox in Bootstrap 3.3.7 hat zwei neue Stile: groß und klein. Fügen Sie eine Modifikatorklasse modal-lg zum div modal-dialogdiv hinzu, um eine größere Modalbox zu erhalten, und fügen Sie modal-sm hinzu, um eine größere zu erhalten Modalbox. Ein kleineres Modal. 🎜🎜Verwenden Sie jQuery, um die Modalbox zu aktivieren🎜🎜Die Modalbox ist ein jQuery-Plug-in. Wenn Sie also jQuery zur Steuerung der Modalbox verwenden möchten, müssen Sie .modal() im Selektor aufrufen der modalen Box. Zum Beispiel: 🎜<pre class="brush:js;toolbar:false;">var options = { &quot;backdrop&quot; : &quot;static&quot; }</pre>🎜Die „Optionen“ hier sind JavaScript-Objekte, die an benutzerdefinierte Verhaltensweisen übergeben werden können. Zum Beispiel: 🎜<pre class="brush:js;toolbar:false;">$(&amp;#39;#basicModal&amp;#39;).on(&amp;#39;shown.bs.modal&amp;#39;, function (e) { alert(&amp;#39;Modal is successfully shown!&amp;#39;); });</pre>🎜Zu den verfügbaren Optionen gehören: 🎜<ul> <li> <strong>backdrop</strong>：这可以是<code>true或static。这定义你是否希望用户能够通过单击背景来关闭模态。

keyboard：如果设置为true则模态框将通过ESC键关闭。

show：用于打开和关闭模态框。它可以是true或false。

remote：这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false。

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有：

• show.bs.modal：在模态框打开之前被触发。
• shown.bs.modal：在显示模态框后触发。
• hide.bs.modal：在模态框被隐藏之前触发。
• hidden.bs.modal：在模态关闭后触发。
• loaded.bs.modal：使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件：

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

在模态框中加载远程内容

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法，如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的，如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中，触发器是一个链接。例如，我们可以不使用我们之前提到的值#而将URL包含在特定页面中：

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

你还可以为触发元素提供data-remote的自定义数据属性，而不是使用href属性。例如：

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

结论

模态框是Bootstrap 3提供的最好的插件之一。对于初级设计师来说，它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung von Modalboxen beim Bootstrap-Lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!