- Bulma 教程
- Bulma - 主頁
- Bulma - 簡介
- Bulma - 概述
- Bulma - 修飾符
- Bulma - 列
- Bulma - 佈局
- Bulma - 表單
- Bulma - 元素
- Bulma - 元件
- Bulma 有用資源
- Bulma - 快速指南
- Bulma - 資源
- Bulma - 討論
Bulma - 模態視窗
描述
模態視窗是在父視窗上分層的子視窗。它顯示來自一個獨立來源（不離開父視窗）的內容，並且可以執行互動操作。
你可以使用 modal 類以及以下 3 個模態視窗類在頁面上顯示該模態視窗 −
modal-background − 它顯示透明的疊加效果。
modal-content − 它將模態視窗內容包含在水平和垂直居中的容器中。
modal-close − 它用於關閉模態視窗。
以下示例顯示瞭如何使用上面的類在頁面上顯示模態視窗 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Simple Modal
</span>
<br>
<br>
<p>
<a class = "button is-primary modal-button" data-target = "#modal">Launch example modal</a>
</p>
<div id = "modal" class = "modal">
<div class = "modal-background"></div>
<div class = "modal-content">
<div class = "box">
<article class = "media">
<div class = "media-left">
<figure class = "image is-64x64">
<img src = "https://tutorialspoint.tw/bootstrap/images/64.jpg" alt="Image">
</figure>
</div>
<div class = "media-content">
<div class = "content">
<p>
<strong>Will Smith</strong>
<small>@wsmith</small>
<small>31m</small>
<br>
This is simple text. This is simple text.
This is simple text. This is simple text.
</p>
</div>
<nav class = "level">
<div class = "level-left">
<a class = "level-item">
<span class = "icon is-small">
<i class = "fa fa-reply"></i>
</span>
</a>
<a class = "level-item">
<span class = "icon is-small">
<i class = "fa fa-retweet"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
<button class = "modal-close is-large" aria-label = "close"></button>
</div>
</div>
</section>
<script>
$(".modal-button").click(function() {
var target = $(this).data("target");
$("html").addClass("is-clipped");
$(target).addClass("is-active");
});
$(".modal-close").click(function() {
$("html").removeClass("is-clipped");
$(this).parent().removeClass("is-active");
});
</script>
</body>
</html>
它顯示以下輸出 −
影像模態視窗
Bulma 允許你透過新增 image 類以及影像路徑在模態視窗中顯示影像，如下面的示例所示 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Image Modal
</span>
<br>
<br>
<p>
<a class = "button is-primary modal-button" data-target = "#modal">Launch image modal</a>
</p>
<div id = "modal" class = "modal">
<div class = "modal-background"></div>
<div class = "modal-content">
<p class = "image is-128x128">
<img src = "https://tutorialspoint.tw/bootstrap/images/64.jpg" alt="">
</p>
</div>
<button class = "modal-close is-large" aria-label="close"></button>
</div>
</div>
</section>
<script>
$(".modal-button").click(function() {
var target = $(this).data("target");
$("html").addClass("is-clipped");
$(target).addClass("is-active");
});
$(".modal-close").click(function() {
$("html").removeClass("is-clipped");
$(this).parent().removeClass("is-active");
});
</script>
</body>
</html>
它顯示以下輸出 −
模態視窗卡片
Bulma 使用模態視窗卡片以一種盒子形式顯示內容，從而提升了外觀效果。
讓我們透過使用 modal-card 類建立一個模態視窗卡片的示例 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Modal Card
</span>
<br>
<br>
<p>
<a class = "button is-primary modal-button" data-target = "#modal">Launch Card modal</a>
</p>
<div id = "modal" class = "modal">
<div class = "modal-background"></div>
<div class = "modal-card">
<header class = "modal-card-head">
<p class = "modal-card-title">Modal Card</p>
<button class = "delete" aria-label = "close"></button>
</header>
<section class = "modal-card-body">
<div class = "content">
<h1>Level One</h1>
<p>
This is simple text. This is simple text.
This is simple text. This is simple text.
</p>
<h2>Level Two</h2>
<p>
This is simple text. This is simple text.
This is simple text. This is simple text.
</p>
<h3>Level Three</h3>
<blockquote>
This is simple text. This is simple text.
This is simple text. This is simple text.
</blockquote>
<h4>Level Four</h4>
<p>
This is simple text. This is simple text.
This is simple text. This is simple text.
</p>
<h5>Level Five</h5>
<p>
This is simple text. This is simple text.
This is simple text. This is simple text.
</p>
</ul>
</div>
</section>
</div>
</div>
</div>
</section>
<script>
$(".modal-button").click(function() {
var target = $(this).data("target");
$("html").addClass("is-clipped");
$(target).addClass("is-active");
});
$(".modal-close").click(function() {
$("html").removeClass("is-clipped");
$(this).parent().removeClass("is-active");
});
</script>
</body>
</html>
它顯示以下輸出 −
bulma_components.htm
廣告