本文实例讲述了jQuery实现单击弹出差异层窗口效果。分享给大家供大家参考。具体如下：

这是一款jquery实现的可拖动可关闭的弹出框效果，网上已经有很多类似效果了，网页上实现这种效果其实并不难，现在又有了jquery让我们用，更方便了，本代码演示了在半铸钢钢性铸铁(铸造半钢)代码、JavaScript代码和超文本标记语言三者结合的情况下，如何实现一个可关闭的弹出窗口，鼠标点击关闭按钮后将其关闭，然后会显示打开按钮，单击这个按钮即弹出这个层窗口。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-close-able-alert-DLG风格-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title windows/title style # main { position : absolute；前：名10%；左侧： 10%;} #标题{宽度： 500像素重量： 19像素边框-top: #85ABE4 1px实心；右边框： #222 1px实心；边框-左侧： #85ABE4 1px实心；边框-底部：无；背景# 5B8BD9} #内容{border: #85ABE4 1px固体；边框-顶部：无；宽度： 500像素；高度： 300px} #内容img { width : 500 pxheart : 300 px } # off { float : right cursor :指针；}.无{显示：无；}.显示{显示：块；} #打开{ background : # fffborder : # 555 1px固体；高度： 13px宽度： 50px绝对位置：左侧： 50pxtop : 400 pxcursor :指针；} #打开字幕{ font-size : 12pxcolor : # 555 } # img { background : URL(图片/s . jpg)无重复；向右浮动：宽度： 49px高度： 19px}#img:悬停{背景： URL(图片/sh。jpg)不重复；} #十{左浮动：宽度： 400像素；}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。就绪（函数(){//设置标题栏document.title=' 0.0 WINDOW//窗口的拖动var bool=false var offsetX=0；var offsetY=0；$('#main ').鼠标向下(function(){ bool=true；offsetX=event . offsetxoffsety=event . offsety $(' #十')。css(“”光标','移动');}) .鼠标上移(function(){ bool=false；}) $(文档)。鼠标移动(函数(e){ if(！bool)返回；var x=事件。客户端x-offsetX；var y=事件。客户分支；$('#main ').css('left '，x)；$('#main ').css('top '，y)；})//窗口的关闭$('#img ').单击(函数(){$('#main ')).移除类(' show ')；$('#main ').添加CLaSS(“none”)；$('#open ').添加CLaSS(' show ')；});$('#open ').单击(函数(){$('#main ')).removeClass("无");$('#main ').添加CLaSS(' show ')；$('#open ').移除类(' show ')；$('#open ').添加CLaSS(' none ')；});});/script/head dydiv id=' main ' class=' show ' div id=' title ' div id=' ten '/div div id=' img ' title=' close '/div/div id=' content '/div/div id=' open ' class=' none ' title=' marquee '点击弹出窗口/marquee/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。