点击当前的td，将容显示在弹窗里面（使用方法：事件委托）

最新推荐文章于 2023-01-27 19:22:56 发布

xiaoerlang715

最新推荐文章于 2023-01-27 19:22:56 发布

阅读量680

点赞数

分类专栏： html javascript css

本文链接：https://blog.csdn.net/xiaoerlang715/article/details/89920784

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

先上效果图
在这里插入图片描述
用到的知识点：事件委托(我们不确定会点击哪个td event.target)
animation动画特效 @keyframs

html
 <!--模态框的制作-->
  <div class='Modal_box'>
  	<div class='Modal_inner'>
  		<img src='img/错号.png' id='Wrong'/>
  		<p></p>
  	</div>
  </div>
  <!--模态框的制作-->
  css
  *{padding:0;margin:0;}
	.Modal_box{width:100%;height:100%;background:transparent;position:fixed;top:0;overflow:hidden;display:none;z-index:999;}
	.Modal_inner{position: absolute;left: 35%;top: 25%;border-radius: 8px;width: 30%;background-color: #0171bb;padding:20px;
	-webkit-box-shadow: #0171bb 0px 0px 10px;
   -moz-box-shadow: #0171bb 0px 0px 10px;
   box-shadow: #0171bb 0px 0px 10px;
   animation: model_animate 0.5s ease-in-out; 
   color:#fff;
  }
  .Modal_inner img{display:block;width:4%;position:absolute;right:12px;}
  .Modal_inner p{padding:20px;text-align:justify;}
		@keyframes model_animate{
			from{
				transform:scale(0);
			}
			to{
				transform:scale(1);
			}
		}
		@-webkit-keyframes model_animate{
			from{
				transform:scale(0);
			}
			to{
				transform:scale(1);
			}
		}
		@-moz-keyframes model_animate{
			from{
				transform:scale(0);
			}
			to{
				transform:scale(1);
			}
		}
		js
		//弹窗效果
			$('#content tr').on('click','td:last-child',function(event){
				$('.Modal_inner p').empty();//每点击一次就要清除一次 不然他再次点击的时候就会继承前面的内容
				var target=$(event.target);
				$('.Modal_box').css('display','block');
				var content=target.attr('data');// 给p标签加了一个data属性 里面存放着要显示到模态框的内容
				$('.Modal_inner p').append(content);
				$('#Wrong').click(function(){
				$('.Modal_box').css('display','none');
			})
			})