javascript - 我正在尝试打开一个具有某种效果的模态窗口-6ren

javascript - 我正在尝试打开一个具有某种效果的模态窗口

转载作者：行者123 更新时间：2023-11-28 01:26:11

openModal() 函数在单击函数时被调用。

我在 Google 上查过，transition 属性不能与 CSS 中的 display 属性一起使用。另一种方法是使用不透明度。但是我无法从 JavaScript 为 CSS 属性调用动画。

    var whm, whs, whd, whc;
function openModal(a) {
        whm="myModal"+a;
        whs="mySlides"+a;
        whd="demo"+a;
        whc="caption"+a;

  document.getElementById(whm).style.display = "block";
  document.getElementById(whm).style.opacity = "1";
 // document.getElementById(whm).classList.add('didLoad');
 //document.getElementById(whm).className += " didLoad";

  document.getElementById(whm).style.webkitTransition = "background 2s";
}

.modal {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;

完整代码

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

.didLoad
{
	background-color: black;
	transition: background-color 2s;
 
	-webkit-transition: background-color 2s;
  
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body>

<h2 style="text-align:center">Lightbox</h2>

<div class="row">
  <div class="column">
    <img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(1);currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(2);currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(3);currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(4);currentSlide(1)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal1" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides1">
      <div class="numbertext">1 / 4</div>
      <img src="http://placehold.it/720x301" style="width:100%">
    </div>

    <div class="mySlides1">
      <div class="numbertext">2 / 4</div>
      <img src="http://placehold.it/720x302" style="width:100%">
    </div>

    <div class="mySlides1">
      <div class="numbertext">3 / 4</div>
      <img src="http://placehold.it/720x303" style="width:100%">
    </div>
    
    <div class="mySlides1">
      <div class="numbertext">4 / 4</div>
      <img src="http://placehold.it/720x304" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption1"></p>
    </div>


    <div class="column">
      <img class="demo1 cursor" src="http://placehold.it/1900x1401" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo1 cursor" src="http://placehold.it/1900x1402" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo1 cursor" src="http://placehold.it/1900x1403" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo1 cursor" src="http://placehold.it/1900x1404" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

<div id="myModal2" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides2">
      <div class="numbertext">1 / 4</div>
      <img src="http://placehold.it/720x201" style="width:100%">
    </div>

    <div class="mySlides2">
      <div class="numbertext">2 / 4</div>
      <img src="http://placehold.it/720x202" style="width:100%">
    </div>

    <div class="mySlides2">
      <div class="numbertext">3 / 4</div>
      <img src="http://placehold.it/720x203" style="width:100%">
    </div>
    
    <div class="mySlides2">
      <div class="numbertext">4 / 4</div>
      <img src="http://placehold.it/720x204" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption2"></p>
    </div>


    <div class="column">
      <img class="demo2 cursor" src="http://placehold.it/1900x1301" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="bhai">
    </div>
    <div class="column">
      <img class="demo2 cursor" src="http://placehold.it/1900x1302" style="width:100%" onclick="currentSlide(2)" alt="bhai bhai">
    </div>
    <div class="column">
      <img class="demo2 cursor" src="http://placehold.it/1900x1303" style="width:100%" onclick="currentSlide(3)" alt="bhai bhai bhai">
    </div>
    <div class="column">
      <img class="demo2 cursor" src="http://placehold.it/1900x1304" style="width:100%" onclick="currentSlide(4)" alt="fuck off">
    </div>
  </div>
</div>

<div id="myModal3" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides3">
      <div class="numbertext">1 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>

    <div class="mySlides3">
      <div class="numbertext">2 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>

    <div class="mySlides3">
      <div class="numbertext">3 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>
    
    <div class="mySlides3">
      <div class="numbertext">4 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption3"></p>
    </div>


    <div class="column">
      <img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

<div id="myModal4" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides4">
      <div class="numbertext">1 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>

    <div class="mySlides4">
      <div class="numbertext">2 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>

    <div class="mySlides4">
      <div class="numbertext">3 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>
    
    <div class="mySlides4">
      <div class="numbertext">4 / 4</div>
      <img src="http://placehold.it/720x300" style="width:100%">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption3"></p>
    </div>


    <div class="column">
      <img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>


<script>
	var whm, whs, whd, whc;
function openModal(a) {
		whm="myModal"+a;
	    whs="mySlides"+a;
		whd="demo"+a;
		whc="caption"+a;
  
  document.getElementById(whm).style.display = "block";
  document.getElementById(whm).style.opacity = "1";
 // document.getElementById(whm).classList.add('didLoad');
 //document.getElementById(whm).className += " didLoad";
 
  document.getElementById(whm).style.webkitTransition = "background 2s";

  

}

function closeModal() {
  document.getElementById(whm).style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName(whs);
  var dots = document.getElementsByClassName(whd);
  var captionText = document.getElementById(whc);
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
    
</body>
</html>

最佳答案

Transitions 不适用于 display 但使用新的 class 和 CSS 动画，你可以做一些不错的事情(我只为 'show' 设置动画):

var show = document.getElementById('show');
var hide = document.getElementById('hide');

show.addEventListener("click", function() {
  document.getElementById('hello').classList.add("active");
});

hide.addEventListener("click", function() {
  document.getElementById('hello').classList.remove("active");
});

#content {
  position: relative;
  text-align: center;
}

#hello {
  position: absolute;
  padding: 10px;
  background-color: yellow;
  text-align: center;
  left: 0;
  right: 0;
  display: none;
  opacity: 0;
}

#hello.active {
  display: block;
  opacity: 1;
  animation: fadeIn .4s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

<div id="content">
  <div id="hello">
    <p>Hello world !</p>
    <button id="hide">Hide</button>
  </div>
  <button id="show">Show</button>
</div>

关于javascript - 我正在尝试打开一个具有某种效果的模态窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51233777/

文章推荐： C++:实例化没有 namespace 的对象

文章推荐： javascript - 从 JQUERY-UI Sortable 中删除 "Dragging"图形

文章推荐： javascript - Jstree issue- 只执行一次

文章推荐： html - Bootstrap 删词

java - Intellij Idea - 打开/打开 "programming assists"
我开始学习 Oracle JavaSE 认证考试。我创建了一个 IntelliJ Idea 项目来处理我的训练源代码。我想尽量减少 IntelliJ Idea 的帮助。我只想使用:颜色语法、终端选
delphi - 打开 Delphi 项目文件 - 打开 DPR 而不是现有的 DPROJ 文件有什么缺点吗？
默认情况下，.DPR 和 .DPROJ 的文件扩展名描述是相同的，因此在资源管理器中打开具有相同基本名称的项目文件时，两个文件描述都会列为“Delphi 项目文件”，这提供了一个选择开发人员 - 要打
android - 将(打开/关闭)按钮添加到(打开/关闭)抽屉导航的 Activity
我目前正在从 android 网站了解 Navigation Drawer，我正在使用他们的示例 http://developer.android.com/training/implementing-
vba - 打开/关闭标志以更改名称
我需要帮助。我在 A3:A500 列中有单词和数字我需要改变他们的名字。如果单元格包含单词“previ”，则如果单元格是数字，则将字母“p”放入新列中。如果它是一个词，那么不要放“p” ...就
VBA EXCEL在特定行上方添加空行[打开]
我正在尝试编写一些 VBA，它允许按钮添加一个空行，保持相同的格式，就在 SUM 公式所在的行上方。到目前为止，我实现了创建一个空行，但我不知道如何实现代码以让该新行继承相同的格式样式(包括边框和格
excel - 打开/关闭工作簿并刷新连接
我在共享网络驱动器上有两个工作簿: 工作簿 A(表) 工作簿 B(数据透视表 - 连接到源工作簿 A) 我正在尝试，当打开 Workbook B 时，运行宏并执行以下操作: 取消保护工作簿 B 上的某
iPad模拟器+打开/关闭互联网
我正在开发一个需要在在线/离线模式下进行测试的应用程序，所以我想知道是否有任何方法可以打开/关闭 iPad 模拟器的互联网连接(不关闭我的 MAC 的互联网服务)。请帮忙最佳答案不，模拟器使用与您
perl - 打开/操作目录中所有文件的最有效方法是什么？
我需要对目录的所有文件执行我的脚本(搜索)。以下是有效的方法。我只是问哪个最好。 (我需要格式的文件名:parsedchpt31_4.txt) 全局: my $parse_corpus; #(for
iphone - 打开 'DEBUG'宏值
在我的代码中，我想有条件地执行一些操作: #ifdef DEBUG NSLog(@"I'm in debug mode"); #endif 我已配置“项目”->“编辑项目设置”->“构建”选项卡，以便
c# - 打开/关闭编译器优化标志的CPU密集型应用程序
我编写了一个小程序来比较笔记本电脑的性能。为了使程序CPU更加密集，我用一些多线程代码(通过Parallel API实现)实现了Rabin-Karp模式匹配算法。我注意到，当在关闭编译器优化标志的情
javascript - 模态关闭/打开
使用以下代码来关闭模态并打开第二个模态。总是遇到同样的问题可以关闭一个但不能打开第二个，或者如果我更改顺序我可以打开一个但不能关闭另一个。 (我想我已经尝试过101版本了)。如果有人能帮忙的话。
javascript - 打开/关闭鼠标悬停时显示的标题
blue sky 默认情况下，当指针悬停时显示标题。是否可以切换它，例如: $('#button').on('click', function(){ if (something) {turn
vba - 打开、保存和关闭任何文件
我正在编写一个简单的宏，它将打开、保存和关闭一个 Excel 文件(例如 myworkbook.xlsx)，但我无法执行此操作。我的文件 myworkbook.xlsx 位于以下位置: C:\User
leaflet - 打开/关闭图层时图层顺序发生变化
我正在加载两个 geoJson 层 - 出于测试目的，两个层都是相同的数据，但是是从两个不同的 json 文件中提取的。当我在图层 Controller 中打开和关闭图层时，图层的绘制顺序会发生变化。
java - 打开/关闭声音按钮不起作用
我在我的设置 Activity 中发现，当用户单击 ToggleButton 时，它应该在整个应用程序中静音，但它不起作用。我在教程类中放入的 SoundPool onClick 按钮声音仍在 onC
java - 打开/关闭给定网络的飞行模式。
我有一部双卡手机。如果我想打开飞行模式，两个 SIM 卡都会发生这种情况。是否可以通过编程方式仅对一张SIM卡进行操作(用户可以选择两者之一)？我看到了here上的帖子，他们一直工作到 API 16
c - 打开()一个文件并在最后写入
我目前正在开发一个带有一些 pipe() 和重定向的 C shell 程序。我使用 dup2() stdout 和 stderr (1 & 2) 重定向。当我用 int fd = open("te
jquery - 打开/另存为对话框
Jquery: 有没有办法捕获浏览器打开“打开/另存为”对话框时触发的事件？ Open/Save dialog example http://qpack.orcanos.com/helpcenter/
javascript - 如何关闭窗口.打开
我知道你可以用 window.close 关闭 window.open 但还有其他方法吗？我有一个打开 facebook 连接的弹出窗口，我想在用户连接到 facebook 时关闭弹出窗口，然后刷新父
c# - 打开/关闭显示电源时触发的事件
我搜索一个事件，如果不存在，则搜索一种方法来了解屏幕是否关闭(电源选项 - 控制面板 - 关闭显示设置)。这些解决方案都不适合我。所以要么我在某个地方错了，要么就是不合适。 How to get

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我正在尝试打开一个具有某种效果的模态窗口