jquery点击按钮,显示隐藏弹框效果
- 点击按钮后改变按钮图片,同时显示弹框,再次点击按钮又重新回到原按钮图,并且再次隐藏弹框。
// 弹框
$(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");
}
});
});
-
photo_img为按钮图类名,photo_Popuo为弹框。
-
第二种示例效果较为简单,点击按钮显示弹框,点击弹框里得取消按钮即可取消弹框。
$(document).ready(function(){
$(".button").click(function(){
$(".look").hide();
$(".div").hide();
// deleteGlobalShade()
});
$(".span1").click(function(){
$(".look").show();
$(".div").show();
// globalShade()
});
});
- 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");
})
- 效果图: