菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA 生成式 AI SCIPY AWS 网络安全 数据科学
     ❯   

W3.CSS 模态框


模态框是一个对话框/弹出窗口,显示在当前页面的顶部

×

模态框页眉

Hello World!

返回 W3.CSS 模态框 了解更多!

模态框页脚 关闭


W3.CSS 模态框类

W3.CSS 为模态窗口提供以下类

定义
w3-modal 模态容器
w3-modal-content 模态内容

创建一个模态框

w3-modal 类定义模态框的容器。

w3-modal-content 类定义模态框内容。

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

示例

<!-- 触发/打开模态框 -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">打开模态框</button>

<!-- 模态框 -->
<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-button w3-display-topright">&times;</span>
      <p>模态框中的一些文本..</p>
      <p>模态框中的一些文本..</p>
    </div>
  </div>
</div>
自己试试 »


打开模态框

使用任何 HTML 元素打开模态框。但是,这通常是按钮或链接。

添加 onclick 属性,并使用 document.getElementById() 方法指向模态框的 id(在我们的示例中为 id01)。


关闭模态框

要关闭模态框,请将 w3-button 类添加到元素中,并添加一个指向模态框 id (id01) 的 onclick 属性。您也可以通过单击模态框外部来关闭它(请参阅下面的示例)。

提示:&times; 是关闭图标的首选 HTML 实体,而不是字母 "x"。


模态框标题和页脚

使用 w3-container 类在模态框内容中创建不同的部分

×

模态框页眉

一些文本..

一些文本..

模态框页脚

示例

<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-button w3-display-topright">&times;</span>
      <h2>模态框标题</h2>
    </header>

    <div class="w3-container">
      <p>一些文本..</p>
      <p>一些文本..</p>
    </div>

    <footer class="w3-container w3-teal">
      <p>模态框页脚</p>
    </footer>

  </div>
</div>
自己试试 »

模态框作为卡片

要将模态框显示为卡片,请将其中一个 w3-card-* 类添加到 w3-modal-content 容器中

×

模态框页眉

一些文本..

一些文本..

模态框页脚

示例

<div class="w3-modal-content w3-card-4">
自己试试 »

动画模态框

使用任何 w3-animate-zoom|top|bottom|right|left 类从特定方向滑入模态框

×

模态框页眉

一些文本..

一些文本..

模态框页脚

×

模态框页眉

一些文本..

一些文本..

模态框页脚

×

模态框页眉

一些文本..

一些文本..

模态框页脚

×

模态框页眉

一些文本..

一些文本..

模态框页脚

×

模态框页眉

一些文本..

一些文本..

模态框页脚

×

模态框页眉

一些文本..

一些文本..

模态框页脚

×

模态框页眉

一些文本..

一些文本..

模态框页脚

示例

<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 元素上设置 w3-animate-opacity 类来淡入模态框的背景颜色

示例

<div class="w3-modal w3-animate-opacity">
自己试试 »

模态框图像

点击图片以全尺寸模态框显示

Norway
×
Norway

示例

<img src="img_snowtops.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_snowtops.jpg">
</div>
自己试试 »

模态图片库

点击图片以全尺寸显示

×

示例

<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="img_snowtops.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>
自己试试 »

模态登录表单

此示例创建一个用于登录的模态框


× 头像
记住我
忘记密码?

示例

自己试试 »

带选项卡内容的模态框

此示例创建带选项卡内容的模态框

×

Header

London

伦敦是英国人口最多的城市,都会区超过 900 万居民。

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.

巴黎

巴黎是法国的首都。

Lorem ipsum dolor sit amet, consectetur adipiscing elit。

东京

东京是日本的首都。


示例

自己试试 »

关闭模态框

在上述示例中,我们使用按钮关闭模态框。但是,使用少量 JavaScript,您也可以在单击模态框外部时关闭模态框

示例

// 获取模态框
var modal = document.getElementById('id01');

// 当用户在模态框外部的任何位置单击时,关闭它
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
自己试试 »

高级:灯箱(模态图片库)

此示例展示了如何在模态框中添加图像幻灯片,以创建“灯箱”

×

Nature and sunrise
French Alps
Mountains and fjords

示例

点击图片
自己试试 »

提示:要了解更多关于幻灯片的信息,请访问我们的 W3.CSS 幻灯片 章。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持