javascript jq 彈出層實(shí)例
更新時(shí)間：2013年08月25日 12:56:46 作者：
javascript jq 彈出提示效果實(shí)現(xiàn)的方法有很多，可能會(huì)在某些地方看到過，下面為大家演示個(gè)示例介紹下如何實(shí)現(xiàn)jq 彈出層，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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彈出層實(shí)例</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 = "這里是信息內(nèi)容，這里是信息內(nèi)容！";
$(".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">關(guān)閉</a></h2>
<div class="form">
這里是提示信息！！
</div>
</div>
<p align="center">
<input value="彈出" class="but" type="button" />
<input type="button" value="關(guān)閉" class="close" />
</p>
</body>
</html>
相關(guān)文章
JavaScript檢測瀏覽器cookie是否已經(jīng)啟動(dòng)的方法
這篇文章主要介紹了JavaScript檢測瀏覽器cookie是否已經(jīng)啟動(dòng)的方法,實(shí)例分析了javascript操作cookie的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript實(shí)現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的內(nèi)存數(shù)據(jù)庫LokiJS介紹和入門實(shí)例,LokiJS是一個(gè)內(nèi)存數(shù)據(jù)庫,將性能考慮放在第一位,使用JavaScript編寫,需要的朋友可以參考下2014-11-11
基于Flowplayer打造一款免費(fèi)的WEB視頻播放器附源碼
Flowplayer是一款免費(fèi)的WEB視頻播放器。它支持播放flv、swf等流媒體和圖片文件，能夠非常流暢的播放視頻文件，支持自定義配置和擴(kuò)展。下面本篇文章給大家介紹基于Flowplayer打造一款免費(fèi)的WEB視頻播放器，需要的朋友可以參考下2015-09-09
Bootstrap導(dǎo)航簡單實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap導(dǎo)航的簡單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
純js實(shí)現(xiàn)倒計(jì)時(shí)功能
本文主要介紹了通過js實(shí)現(xiàn)頁面的倒計(jì)時(shí)功能的思路與方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript注冊時(shí)密碼強(qiáng)度校驗(yàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript注冊時(shí)密碼強(qiáng)度校驗(yàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了JSx實(shí)現(xiàn)簡單控制視頻播放倍速，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
javascript中創(chuàng)建對象的三種常用方法
在javascript中創(chuàng)建對象的三種方法，腳本之家以前發(fā)布過有簡單實(shí)例版的，大家可以參考下。2010-12-12
下面小編就為大家?guī)硪黄猻encha ext js 6 快速入門(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)輪播圖小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11