脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jq 弹出层

javascript jq 弹出层实例

 更新时间：2013年08月25日 12:56:46   作者：  
javascript jq 弹出提示效果实现的方法有很多，可能会在某些地方看到过，下面为大家演示个示例介绍下如何实现jq 弹出层，感兴趣的朋友可以参考下
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery弹出层实例</title>
<script type="text/javascript" src="http://www.jqueryajax.com/wp-content/uploads/2009/03/jquery-132min1.js"></script>
<script type="text/javascript">
$(function(){
$(".but").click(function(){
var str = "这里是信息内容，这里是信息内容！";
$(".form").html(str);
$("#faqbg").css({display:"block",height:$(document).height()});
var yscroll =document.documentElement.scrollTop;
$("#faqdiv").css("top","100px");
$("#faqdiv").css("display","block");
document.documentElement.scrollTop=0;
});
$(".close").click(function(){
$("#faqbg").css("display","none");
$("#faqdiv").css("display","none");
});
})
</script>
<style type="text/css">
body,h2{margin:0 ; padding:0;}
#faqbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#faqdiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#faqdiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#faqdiv h2 a{position:absolute; right:5px; font-size:12px; color:#FF0000}
#faqdiv .form{padding:10px;}
</style>
</head>

<body >

<div id="faqbg"></div>
<div id="faqdiv" style="display:none">
<h2>信息窗口<a href="#" class="close">关闭</a></h2>
<div class="form">
这里是提示信息！！

</div>
</div>
<p align="center">
<input value="弹出" class="but" type="button" />
<input type="button" value="关闭" class="close" />
</p>
</body>
</html>
您可能感兴趣的文章:

相关文章

  • JavaScript检测浏览器cookie是否已经启动的方法

    JavaScript检测浏览器cookie是否已经启动的方法

    这篇文章主要介绍了JavaScript检测浏览器cookie是否已经启动的方法,实例分析了javascript操作cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript实现的内存数据库LokiJS介绍和入门实例

    JavaScript实现的内存数据库LokiJS介绍和入门实例

    这篇文章主要介绍了JavaScript实现的内存数据库LokiJS介绍和入门实例,LokiJS是一个内存数据库,将性能考虑放在第一位,使用JavaScript编写,需要的朋友可以参考下
    2014-11-11
  • 基于Flowplayer打造一款免费的WEB视频播放器附源码

    基于Flowplayer打造一款免费的WEB视频播放器附源码

    Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。下面本篇文章给大家介绍基于Flowplayer打造一款免费的WEB视频播放器，需要的朋友可以参考下
    2015-09-09
  • Bootstrap导航简单实现代码

    Bootstrap导航简单实现代码

    这篇文章主要介绍了Bootstrap导航的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 纯js实现倒计时功能

    纯js实现倒计时功能

    本文主要介绍了通过js实现页面的倒计时功能的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript注册时密码强度校验代码

    JavaScript注册时密码强度校验代码

    这篇文章主要为大家详细介绍了JavaScript注册时密码强度校验代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • DPlayer.js视频播放插件使用方法

    DPlayer.js视频播放插件使用方法

    这篇文章主要为大家详细介绍了JSx实现简单控制视频播放倍速，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • javascript中创建对象的三种常用方法

    javascript中创建对象的三种常用方法

    在javascript中创建对象的三种方法，脚本之家以前发布过有简单实例版的，大家可以参考下。
    2010-12-12
  • sencha ext js 6 快速入门(必看)

    sencha ext js 6 快速入门(必看)

    下面小编就为大家带来一篇sencha ext js 6 快速入门(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS实现轮播图小案例

    JS实现轮播图小案例

    这篇文章主要为大家详细介绍了JS实现轮播图小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论