From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/modals.html | 353 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 353 insertions(+) create mode 100644 docs/components/modals.html (limited to 'docs/components/modals.html') diff --git a/docs/components/modals.html b/docs/components/modals.html new file mode 100644 index 0000000..eb5549a --- /dev/null +++ b/docs/components/modals.html @@ -0,0 +1,353 @@ + + + + Modals - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Modals

+
+
+ + + +
+
+ + +
+
+

Modals are flexible dialog prompts.

+
+
Open Modal + +
+
+

Add a container element with the modal class. + And add a real container modal-container and overlay modal-overlay inside it. + You can add child elements with the modal-header, modal-body and modal-footer - any or all of them. +

+

+ Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. + To make a modal appear, add the active class to the modal container. +

+ 
<div class="modal active" id="modal-id">
+  <a href="#close" class="modal-overlay" aria-label="Close"></a>
+  <div class="modal-container">
+    <div class="modal-header">
+      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
+      <div class="modal-title h5">Modal title</div>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        <!-- content here -->
+      </div>
+    </div>
+    <div class="modal-footer">
+      ...
+    </div>
+  </div>
+</div>
+
+

Modal sizes

+
+
Open small size Modal + +
+
+

Use the modal-sm class for a smaller modal dialog. + The container max width is 320px. +

+
+
Open large size Modal + +
+
+

Use the modal-lg class for a full size modal. + The container max width is 960px. +

+ 
<div class="modal modal-sm">
+  <a href="#close" class="modal-overlay" aria-label="Close"></a>
+  <div class="modal-container">
+    <!-- modal structure here -->
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d