零基础学做网站培训介绍

当前位置:

jquery实现点击弹框并且全屏背景变黑

有些网站中有这样的效果,当点击一个按钮后,出现一个弹窗,然后其余的部分背景都变成黑色,如下图:

jquery实现点击弹框并且全屏背景变黑

如何实现这种点击后弹窗并且全屏背景变黑的效果呢?方法如下:

首先我们要引入jQuery文件,这个效果是在jQuery的基础上实现的。


<script src="./jquery.min.js"></script>

其次,因为要实现弹窗效果,所以要加上以下JS代码;


<script>
$(function(){
$('#add_host').click(function(){
$('.shade, .add-model').removeClass('hide');
});
});
</script>

另外,我们要写二个DIV层,一个是弹出层,一个遮罩层;

<div class="shade hide"></div>
<div class="add-model hide">这里可以添加你想弹出的内容</div>

最后,我们要通过CSS来控制它们的样式;


<style>
.hide{display: none;}
.shade{position: fixed;top : 0;right: 0;left: 0;bottom: 0;background: black;opacity: 0.6;z-index: 100;}
.add-model {position: fixed;height: 300px;width: 400px;top: 100px;left: 50%;z-index: 101;border: 1px solid red;background: white;margin-left: -200px;}
</style>

jquery实现点击弹框并且全屏背景变黑完整代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现点击弹框并且全屏背景变黑</title>
<style>
.hide{display: none;}
.shade{position: fixed;top : 0;right: 0;left: 0;bottom: 0;background: black;opacity: 0.6;z-index: 100;}
.add-model {position: fixed;height: 300px;width: 400px;top: 100px;left: 50%;z-index: 101;border: 1px solid red;background: white;margin-left: -200px;}
</style>
</head>
<body>
<div>
<input id="add_host" type="button" value="添加">
</div>
<div class="shade hide"></div>
<div class="add-model hide">这里可以添加你想弹出的内容</div>
<script src="./jquery.min.js"></script>
<script>
$(function(){
$('#add_host').click(function(){
$('.shade, .add-model').removeClass('hide');
});
});
</script>
</body>
</html>

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • 有些同学在使用WP程序做网站时,安装了WP程序之后进入配置数据库这一步,可是出现了点击‘创建配置文件’无反应的情况,这是由于有些同学使用的网站空间
  • 我们在进行DZ模板制作时,使用DIY功能去调用论坛中的不同版块的数据,由于DIY会自动增加外面的层,有时会导致某些模板的diy没反应,也有的只会显示不
  • 在学做网站论坛前面的教程:wordpress制作符合Bootstrap的导航栏菜单(带二级菜单),我们可以制作出带有二级下拉菜单的导航。但是有的建网站学员在制
  • 有些网站中有这样的效果,当点击一个按钮后,出现一个弹窗,然后其余的部分背景都变成黑色,如下图:如何实现这种点击后弹窗并且全屏背景变黑
  • 第一个问题:引用土豆的视频到自己网站 怎么不能全屏?能在网页观看但不能全屏?求大神帮帮忙第二个问题:在自己网站单独弄个播放器怎摸弄 请各位
  • 这是一款大气全屏财务企业管理官网Wordpress模板,可以制作财务公司网站,企业管理公司官网网站。全屏页面滚动展示企业管理解决方案网站Wordpress模板
  • 网页如何添加背景音乐 视频教程附件下载 (1109718 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • 如何给网页添加背景图片 视频教程 (1110060 次浏览)
    使用DW软件给网页添加背景图片的步骤: 启动Dreamweaver程序,新建一个新的HTML文档,将文档保存到电脑的适当位置。 单击属性栏中的“属性
  • 默默无闻的网页我们看了成千上万,怎么让自己做网页能发声呢,来试试给网页添加一些背景音乐吧。(相关教程:如何在网页里添加背景音乐)网页中添加