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中將變量轉(zhuǎn)換為字符串的三種方法
這篇文章主要給大家介紹了關(guān)于Javascript中將變量轉(zhuǎn)換為字符串的三種方法，這三種方法分別是：value.toString()、"" + value和String(value)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要介紹了詳解小程序云開發(fā)攻略(解決最棘手的問題)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript 判斷對(duì)象中是否有某屬性的常用方法
判斷對(duì)象中是否有某屬性的常見方式總結(jié)，不同的場景要使用不同的方式。這篇文章給大家介紹了JavaScript 判斷對(duì)象中是否有某屬性的常用方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
JavaScript快速檢測(cè)瀏覽器對(duì)CSS3特性的支持情況
在項(xiàng)目中需要快速檢測(cè)瀏覽器是否支持某CSS3特性，比如檢測(cè)是否支持“transform”，然后我的布局會(huì)有兩種完全不同的版式2012-09-09
發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的
發(fā)兩個(gè)小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...2007-04-04
這篇文章主要介紹了微信小程序制作扭蛋機(jī)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能
這篇文章主要介紹了uni-app實(shí)現(xiàn)點(diǎn)贊評(píng)論功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了JS控制按鈕10秒鐘后可用的方法,涉及JavaScript基于時(shí)間函數(shù)控制頁面元素樣式動(dòng)態(tài)變換的技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了e2e測(cè)試之cypress的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
表格求和想必大家并不陌生，下面為大家詳細(xì)介紹下通過相同的name進(jìn)行表格求和，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08