W3.CSS Modal (模式)

2020-12-01 15:23 更新

W3.CSS Modal 类

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">Open Modal</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">×</span>

      <p>一些文字。一些文字。一些文字。</p>

      <p>一些文字。一些文字。一些文字。</p>

    </div>

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

打开一个模式

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

使用 document.getElementById()方法,添加 onclick 属性并指向模式的 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">×</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">

尝试一下 »
点击“尝试一下”按钮查看在线实例

模式图像

单击图像以全尺寸显示为模式:

实例

<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>

尝试一下 »
点击“尝试一下”按钮查看在线实例

模式登录表

本示例创建登录模式:

实例

<div class="w3-container">

  <h2>W3.CSS 登录模式</h2>

  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green w3-large">登录</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

带选项卡内容的模式

本示例创建带有选项卡式内容的模式:

实例

<div class="w3-container">

<h2>模式标签</h2>

<p>在此示例中,我们在模式内添加选项卡式内容。</p>

<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">打开i选项卡模式</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

关闭模式

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

实例

// 获取模式

var modal = document.getElementById('id01');

// 当用户单击模式之外的任何位置时,将其关闭

window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = "none";

  }

}


尝试一下 »
点击“尝试一下”按钮查看在线实例

进阶:Lightbox(模组图片库)

本示例说明如何在模式内部添加图片幻灯片,以创建“灯箱”:

实例

<div class="w3-row-padding" style="margin:0 -16px">

  <div class="w3-col s4">

    <img src="img_nature_wide.jpg" style="width:100%;cursor:pointer"

    onclick="openModal();currentDiv(1)" class="w3-hover-shadow">

  </div>

  <div class="w3-col s4">

    <img src="img_snow_wide.jpg" style="width:100%;cursor:pointer"

    onclick="openModal();currentDiv(2)" class="w3-hover-shadow">

  </div>

  <div class="w3-col s4">

    <img src="img_mountains_wide.jpg" style="width:100%;cursor:pointer"

    onclick="openModal();currentDiv(3)" class="w3-hover-shadow">

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号