Jquery 点击按钮显示和隐藏层的代码
字体：[ ] 类型：转载 时间：
不好意思，刚刚发了一个类似的效果，发现代码比较多，而却还有一个bug，现在修正了错误，需要的朋友可以参考下。
代码： 代码如下:&!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 runat="server"& &title&&/title& &script type="text/javascript" src="../Javascript/jquery-1.6.js"&&/script& &style type="text/css"& #choice_list_district{ height:50} #tab td{cursor:} &/style& &script type="text/javascript"& $(function () { //绑定事件处理 $("#choice_list_district a").click(function (e) { if ($("#divObj").css("display") == "none") { e.stopPropagation(); //设置弹出层位置 var offset = $(e.target).offset(); //设置弹出层位置在点击的下面 $("#divObj").css({ top: offset.top + $(e.target).height() + "px", left: offset.left }); $("#divObj").show(); } else { $("#divObj").hide(); } }); //单击空白区域隐藏弹出层 $(document).click(function (event) { $("#divObj").hide(); }); //单击弹出层则自身隐藏 //$("#divObj").click(function (event) { $("#divObj").hide(speed) }); $("#tab tr td").click(function (event) { $("#aaa").val($(this).html()); }); }); &/script& &/head& &body& &form id="form1" runat="server"& &div& &div id="choice_list_district"& &a href="#"&出来层&/a& &/div&&div id="divObj" style="position: width:200 height:200 background: border:1 display: z-index:9999;"& &table id="tab"& &tr& &td&aaa&/td& &/tr& &tr& &td&bbb&/td& &/tr& &/table& &/div& &div style="position: top:200 left:200"& &input type="text" id="aaa" /& &/div& &/div& &/form& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具当前位置： >
jQuery点击空白处隐藏弹出层
一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 ,效果源码：
padding: 0;
margin: 0;
margin: 100px auto 0;
border: 2px solid #666666;
position: display:
width: 400
height: 200
color: #333;
background: #
padding-top: 10
text-align:
font: 16px/30px &微软雅黑&;
margin-top: -105
margin-left: -200
left: 50%;
$(function () {
$('#btnShow').click(function (event) {
//取消事件冒泡
event.stopPropagation();
//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$('#divTop').toggle('slow');
//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
$(document).click(function(event){
var _con = $('#divTop');
// 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
//$('#divTop').slideUp('slow');
//滑动消失
$('#divTop').hide(1000);
//淡出消失
HTML代码：
&input type=&button& id=&btnShow& value=&弹出框按钮& /&
&div id=&divTop&&
&点击空白区域弹出层关闭！
经过测试，在移动端Iphone手机上点击页面空白处弹出层关闭失效，不支持document写法，解决方案：可以添加一个背景层作为页面空白对象处理。
点击空白处隐藏弹出层案例二：
&!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&&
&title&点击空白处关闭弹出层&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&style type=&text/css&&
#box{width:300height:200border:1px solid #000;display:}
.btn{color:}
&script type=&text/javascript& src=&/public/js/jquery.js&&&/script&
&script type=&text/javascript&&
$(function(){
&& &$(&.btn&).click(function(event){
&& &&& &var e=window.event ||
&& &&& &if(e.stopPropagation){
&& &&& &&& &e.stopPropagation();
&& &&& &}else{
&& &&& &&& &e.cancelBubble =
&& &&& &}& &
&& &&& &$(&#box&).show();
&& &$(&#box&).click(function(event){
&& &&& &var e=window.event ||
&& &&& &if(e.stopPropagation){
&& &&& &&& &e.stopPropagation();
&& &&& &}else{
&& &&& &&& &e.cancelBubble =
&& &document.onclick = function(){
&& &&& &$(&#box&).hide();
&div id=&box&&&/div&
&span class=&btn&&点击此处打开弹出层&/span&&br&点击空白处关闭弹出层
更多JS教程请关注：科e互联 & 建站教程 &
大家都在看
本站关键词
科e互联版权所有
京ICP备号-1}