W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 模态框



模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。

×

Modal Header

Hello World!

Go back to W3.CSS Modal to learn more!

Modal Footer Close


如何创建模态框

Example

<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">Open Modal</button>

<!-- The Modal -->
<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'"
      class="w3-closebtn">&times;</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
  </div>
</div>
尝试一下 »

"w3-modal" 类

模态框可以是任何带有 class="w3-modal" 的HTML容器(例如:<div>)。


"w3-modal-content" 类

所有的模态框内容都应放到带有 class="w3-modal-content" 的HTML容器中。

模态框内容可以是任何HTML元素(标题,段落,图片等等)。


打开模态框

使用任何HTML元素都可以打开模态框。通常使用按钮或链接。

添加 onclick 属性,并使用 document.getElementById() 方法指定与“触发器”按钮(id01)匹配的唯一ID。


关闭模态框

要关闭模态,请将 w3-closebtn 类添加到指向模态(id01)的id的 onclick 属性。 您还可以通过单击模态外部(请参见下面的实例)来关闭它。

Note &times; (×) 是一个HTML实体,它是关闭按钮的首选图标,而不是字母“x”。

模态框 页眉&页脚

在 class="w3-modal-content" 的 <div> 中,使用 w3-container 类在模态框中创建不同部分:

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

Example

<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <header class="w3-container w3-teal">
      <span onclick="document.getElementById('id01').style.display='none'"
      class="w3-closebtn">&times;</span>
      <h2>Modal Header</h2>
    </header>
    <div class="w3-container">
      <p>Some text..</p>
      <p>Some text..</p>
    </div>
    <footer class="w3-container w3-teal">
      <p>Modal Footer</p>
    </footer>
  </div>
</div>
尝试一下 »

模态框用作卡片

要以卡片形式显示模态框,在 w3-modal-content 容器中添加 w3-card-* 类即可:

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

Example

<div class="w3-modal-content w3-card-8">
尝试一下 »


动画效果的模态框

使用 w3-animate-zoom|top|bottom|right|left 类中的任何一种可以从不同的方向滑动加载模态框:

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

×

Modal Header

Some text..

W3C中文教程 - 全球 最大 最新 的中文 Web 技术教程

Some text..

Modal Footer

Example

<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
尝试一下 »

您也可以淡入模态框的背景颜色(w3-modal):

Example

<div class="w3-modal w3-animate-opacity">
尝试一下 »

图像模态框

点击图片显示它的全尺寸:

Norway
×
Norway

Example

<img src="img_fjords.jpg" onclick="document.getElementById('modal01').style.display='block'" class="w3-hover-opacity">

<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
  <img class="w3-modal-content" src="img_fjords.jpg">
</div>
尝试一下 »

图像库模态框

点击图片显示它的完整尺寸:

×

Example

<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="img_fjords.jpg" style="width:100%" onclick="onClick(this)">
  </div>
  <div class="w3-container w3-third">
    <img src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
  </div>
  <div class="w3-container w3-third">
    <img src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
  </div>
</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <img class="w3-modal-content" id="img01" style="width:100%">
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>
尝试一下 »

表单登录模态框

以下实例为登录创建一个模态框:

×

Avatar
Remember me
Forgot password?

Example

尝试一下 »

标签模态框

以下实例创建一个具有标签内容的模态框:

×

Header

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Paris

Paris is the capital of France.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tokyo

Tokyo is the capital of Japan.


Example

尝试一下 »

关闭模态框

在上面的例子中,我们用一个按钮来关闭模态框。但是,使用一点点JavaScript,还可以在单击模式框外部时关闭模态:

Example

// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
尝试一下 »