热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

可自己添加html的伪弹出框实现代码

本文为大家介绍下html伪弹出框的实现,感兴趣的朋友可以了解下
js
代码如下:

var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var browser=navigator.userAgent;
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var stop="";
var sleft="";
if(browser.indexOf('Chrome')!=-1){
stop=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else{
stop=document.documentElement.scrollTop;
sleft=document.documentElement.scrollLeft;
}
// windowWidth+=document.body.scrollLeft;
// windowHeight+=document.body.scrollTop;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2+stop,
"left": windowWidth/2-popupWidth/2+sleft
});
//only need force for IE6
//背景色
$("#backgroundPopup").css({
"height": windowHeight
});
}
//调用弹出框事件
function bb(str){
$("#download").show();
centerPopup();
loadPopup();
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!,点击背景事件
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
}

html代码(默认隐藏)
代码如下:







推荐阅读
  • 子元素过滤器在页面设计过程中需要突出某些行时,可以通过基本过滤选择器中的:eq()来实现表单中行的凸显,但不能同时让多个表具有相同的效果。在jQuer ... [详细]
  • 结束jquery时间不长,写代码感觉很生,而且敢接写起来很费劲做点简单的总结。首先主要要先引入.juery.js文件第二一些js插件文件也要在jquer ... [详细]
  • python+selenium+chrome网页自动化测试:1、在pycharm中安装selenium:file-setting-projectinterpreter中搜索sele ... [详细]
  • JS·经典·炫彩菜单(动画效果) for jquery
    CSS样式body{font-size:12px;}.menuBox{width:50%;height:auto;margin:0auto;}.menuBoxul{margin:0 ... [详细]
  • 使用html2canvas截图网页全页或者某个元素 ... [详细]
  •  jqueryui中dialog和easyui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这个控件。1.实例官网源代码中给出了一些实例,首先看看实例是什么样子的。 a.默认功能也是最简单的应用,也就是打开一个对话框,代码如下<!doctypehtml><html ... [详细]
  • 利用JavaScript的函数有两种方式1.jQueryjQuery.inArray(value,array[,fromIndex])value类型: Anything要查找的值。 ... [详细]
  • 本文目录一览:1、java中几种解析html的工具 ... [详细]
  • 去网上在线生成一个favicon.ico图标,然后把下面的代码复制到页面的head ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 题目链接:http:poj.orgproblem?id1905题目大意:竹竿受热会膨胀。设其原长为L,受热膨胀后的长度L'(1+n*C)*L,其中n,C,L都是要输入的参数 ... [详细]
  • 1.EF跟LINQ不是一码事儿。2.LINQtoEF是LINQ的一个provider,LINQtoSQL也是LINQ的一个provider。LINQtoEF是LINQtoSQL的替 ... [详细]
  • Matplotlib笔记:设置画布属性并保存图片(figsize,dpi,savefig)
    设置画布属性并保存图片importmatplotlib.pyplotaspltplt.figure(figsize(10,4),dpi80)#图片长宽和清晰度plt.p ... [详细]
  • 关于HTML页面无法连接到静态图像资源的原因和解决办法
    起因:某想着把虚拟试穿算法实现的功能整成一个网页版,后台服务+前端显示。服务写好后,网页界面显示静态图像始终报错:找不到,显示如下:下面显示正常的是因为,img标签的src网络资源 ... [详细]
author-avatar
骑着羊赶着狼
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有