html5如何实现d出提示框，并且伴随遮罩层并且可以关闭d出框

通过jquery的show()和hide()函数联合使用，实现d出窗口。

一、show（）和hide（）函数解析：

1、show() 方法显示隐藏的被选元素。

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

2、hide() 方法隐藏被选元素。

这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。

二、设计一个HTML页面，包括一个简单的d出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：

三、设计遮罩层的样式，如下：

四、d出窗口的css样式，代码如下：

五、初始页面如下：

六、点击按钮，查看d出窗口结果：

七、关闭d出窗后，打开开发者中心，如下：

<style type="text/css">

<!--

.STYLE1 {color: #000000}

.list_que{

text-decoration: none !important

color: #000000 !important

}

.lt_ccz_ima{

cursor: pointer

}

.faq_list{

width: 753px

height: 500px

}

.sj_dxcd{ height:27pxline-height:27pxbackground-image: url(../images/faqFeedback/xt_12.jpg)

background-position:bottombackground-repeat:repeat-xmargin-top:20pxtext-align:left

}

.nav1{ float:leftmargin-left:15pxbackground-image:url(../images/faqFeedback/xt_13.jpg)

height:27pxwidth:88pxline-height:27pxtext-align:centercolor:#005BAC

font-weight:boldcursor:pointer

}

.nav2{ float:leftmargin-left:15pxbackground-image:url(../images/faqFeedback/xt_14.jpg)

height:27pxwidth:88pxline-height:27pxtext-align:center

cursor:pointer

}

/*标题提示文字定义*/

body div#tooltip { position:absolutez-index:1000max-width:300pxwidth:auto!importantwidth:autobackground:#006CDBborder:#FEFFD4 solid 1pxtext-align:leftpadding:3px}

body div#tooltip p { margin:0padding:0color:#FFFFFEfont:12px verdana,arial,sans-serif}

body div#tooltip p em { display:blockmargin-top:3pxcolor:#f60font-style:normalfont-weight:bold}

-->

</style>

<script type="text/javascript"><!--

$(function(){

//$(".news_content p:odd").addClass("p03") //隔行换色处，额数行增加样式P03

//鼠标经过样式变化处

$(".list_unit").hover(

function () {

$(this).addClass("p02") //鼠标经过时增加样式P02

},

function () {

$(this).removeClass("p02")//鼠标离开时移除样式P02

}

)

$(".list_show a").toggle(

function(){

$("#an_"+this.id).slideDown("slow")

parent.addframeAutoHeight(290,1)

},

function(){

$("#an_"+this.id).slideUp("slow")

parent.addframeAutoHeight(290,2)

}

)

})

//标题提示效果处

var sweetTitles = {

x : 10,

y : 20,

tipElements : ".list_que",

init : function() {

$(this.tipElements).mouseover(function(e){

this.myTitle = this.title

this.myHref = this.href

this.myHref = (this.myHref.length >200 ? this.myHref.toString().substring(0,200)+"..." : this.myHref)

this.title = ""

var tooltip = ""

if(this.myTitle == "")

{

tooltip = ""

}

else

{

tooltip = "<div id='tooltip'><p>"+this.myTitle+"</p></div>"

}

$('body').append(tooltip)

$('#tooltip')

.css({

"opacity":"0",

"top":(e.pageY+20)+"px",

"left":(e.pageX+10)+"px"

}).show('fast')

}).mouseout(function(){

this.title = this.myTitle

$('#tooltip').remove()

}).mousemove(function(e){

$('#tooltip')

.css({

"top":(e.pageY+20)+"px",

"left":(e.pageX+10)+"px"

})

})

}

}

$(function(){

sweetTitles.init()

})

function enFloat(){

var x = getPageSize().pageWidth

var y = getPageSize().pageHeight

//遮蔽层

document.getElementById("float_div").style.display = "block"

document.getElementById("float_div").style.width = x + "px"

document.getElementById("float_div").style.height = y + "px"

//浮出层

document.getElementById("float_main").style.display = "block"

var o_w = document.getElementById("float_main").clientWidth

var o_h = document.getElementById("float_main").clientHeight

var o_l = Math.round((x - o_w)/2)

var s_h = getScrollLocation()+ (350 - Math.round(o_h/2))

if(s_h <= 0){

s_h = getScrollLocation()

}

document.getElementById("float_main").style.left = o_l + "px"

document.getElementById("float_main").style.top = s_h + "px"

/**

if(HYXCheckIEVersion() == "ie6"){

HYXnotDisplaySelect(0)

}

*/

}

function disFloat(){

/**

if(HYXCheckIEVersion() == "ie6"){

HYXnotDisplaySelect(1)

}

*/

document.getElementById("float_div").style.display = "none"

document.getElementById("float_main").style.display = "none"

}

function getScrollLocation(){

var scrollPos

//firefox

if (typeof window.pageYOffset != 'undefined') {

scrollPos = window.pageYOffset

}

//IE6

else if (typeof document.compatMode != 'undefined' &&

document.compatMode != 'BackCompat') {

scrollPos = document.documentElement.scrollTop

}

else if (typeof document.body != 'undefined') {

scrollPos = document.body.scrollTop

}

return scrollPos

}

function getPageSize(){

var pageWidth , pageHeight

var xScroll, yScroll

if (window.innerHeight &&window.scrollMaxY) {

xScroll = document.body.scrollWidth

yScroll = window.innerHeight + window.scrollMaxY

} else if (document.body.scrollHeight >document.body.offsetHeight){ // all but Explorer Mac

xScroll = document.body.scrollWidth

yScroll = document.body.scrollHeight

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth

yScroll = document.body.offsetHeight

}

var windowWidth, windowHeight

if (self.innerHeight) { // all except Explorer

windowWidth = self.innerWidth

windowHeight = self.innerHeight

} else if (document.documentElement &&document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth

windowHeight = document.documentElement.clientHeight

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth

windowHeight = document.body.clientHeight

}

if(yScroll <windowHeight){

pageHeight = windowHeight

} else {

pageHeight = yScroll

}

if(xScroll <windowWidth){

pageWidth = windowWidth

} else {

pageWidth = xScroll

}

return {pageWidth:pageWidth,pageHeight:pageHeight}

}

function HYXnotDisplaySelect(x){

var obj = new Object

obj = document.getElementsByTagName("select")

for(var i=0i<obj.lengthi++){

if(obj[i].className == "hen_sel"){

continue

}

if(x==0){

obj[i].style.display = "none"

}

else{

obj[i].style.display = ""

}

}

var iframe = new Object

iframe = document.getElementsByTagName("iframe")

for(var i=0i<iframe.lengthi++)

{

if(iframe[i].src.indexOf('http') != -1)

{

continue

}

var iframeselect = window.frames[i].document.getElementsByTagName("select")

for(var j=0j<iframeselect.lengthj++)

{

if(obj[j].className == "hen_sel"){

continue

}

if(x==0)

{

iframeselect[j].style.display = "none"

}else

{

iframeselect[j].style.display = ""

}

}

}

}

function HYXCheckIEVersion()

{

if (document.all)

{

//IE

if ( /MSIE 6.0/ig.test(navigator.appVersion) )

{

//为ie6

return "ie6"

}

}

return ""

}

function main(obj)//调用演示

{

enFloat()

}

---