jquery点击按钮，显示隐藏弹框。

jquery点击按钮，显示隐藏弹框效果

1. 点击按钮后改变按钮图片，同时显示弹框，再次点击按钮又重新回到原按钮图，并且再次隐藏弹框。

// 弹框
			$(document).ready(function(e) { 
			    $(".photo_img").click(function(){
			         if(!$(".photo_Popup").is(":visible")){
			          $(".photo_Popup").show(); 
			          $(this).val("隐藏");
					  $(".photo_img").attr("src","img/photo1.png");
			         }else{ 
			          $(".photo_Popup").hide(); 
			          $(this).val("显示");
					  $(".photo_img").attr("src","img/photo.png");
			        }
			    });
			        
			});
           

1. photo_img为按钮图类名，photo_Popuo为弹框。
2. 第二种示例效果较为简单，点击按钮显示弹框，点击弹框里得取消按钮即可取消弹框。

$(document).ready(function(){
	$(".button").click(function(){
		  $(".look").hide();
		  $(".div").hide();
		  // deleteGlobalShade()
	  });
	  $(".span1").click(function(){
		  $(".look").show();
		  $(".div").show();
		 // globalShade()
	  });
  });
           

1. span1为点击按钮，look为点击弹框，div为遮罩层，button为取消按钮。

   3.第三种实力效果为点击下拉菜单隐藏显示ul列表。

<div class="div-three">
								<img src="./img/hua.png"/>
								<p>归属类型:</p>
								<div class="select_two">
									<p class="title_p">电</p>
									<img class="onclick img" src="./img/hj.png"/>
									<div class="down_two">
										<ul class="list_two">
											<li class="list_li">1</li>
											<li class="list_li">1</li>
											<li class="list_li">1</li>
										</ul>
									</div>
								</div>
							</div>
           

$(".select_two").click(function(){
					$(".down_two").slideToggle();
				});
				$(".select_two .list_li").click(function(){
					var text = $(this).text();
					$(".select_two .title_p").text(text);
					$(".select_two .title_p").css("color","#fff");
				
					$(this).css("background-color","#367fe5");//被选中时改变其背景色
					$(this).siblings().css("background-color","");//获取到当前点击的元素的同级元素 然后去除上次被选中得背景色
					// $(".select_one").css("background-color","#367fe5");
				})
				
           

• 效果图：