Question

我有一个页面，其中包含一些隐藏的全屏div。现在我想要实现，我可以通过单击相对按钮单独打开这些div 并通过单击div中的“关闭”按钮关闭它们。

此刻，我可以打开一个div但是当我关闭它时，下一个显示出来而无法关闭它。

这是我的代码：

$(".button").click(function() {
    $(".overlay").addClass("overlay-open");         
    $(".closeoverlay").click(function() {   
        $("#overlay1").removeClass("overlay-open");
        $(".overlay").addClass( "overlay-close" );  
    });

我做了一个小提琴，让它更清晰：http://jsfiddle.net/xq2gw50d/

Answer 1

我认为这应该如下所示，因为此时closeoverlay点击了button click，这样就会产生问题。只需在closeoverlay click之外设置button click事件，如下所示：

<强> HTML：

<a href="#" class="button" data-rel="overlay1" id="go1">Open Overlay 1</a>  
<a href="#" class="button" data-rel="overlay2" id="go2">Open Overlay 2</a>  
<div class="overlay" id="overlay1">Overlay 1
    <div class="closeoverlay">X</div>
</div>
<div class="overlay" id="overlay2">Overlay 2
    <div class="closeoverlay">X</div>
</div>

<强> JS：

$(".button").click(function () {
    var overlay = $(this).data('rel')
    $("#" + overlay).addClass("overlay-open");
});
$(".closeoverlay").click(function (e) {
    e.stopPropagation();
    $(this).closest('.overlay').removeClass("overlay-open");  
});

编辑：

$(".button").click(function () {
    var overlay = $(this).data('rel')
    $("#" + overlay).addClass("overlay-open");
    $("#" + overlay).removeAttr("style");

});
$(".closeoverlay").click(function (e) {
    e.stopPropagation();
    $(this).closest('.overlay').fadeOut(function () {
        $(this).closest('.overlay').removeClass("overlay-open");
    });
});

JSFILLDE DEMO

Answer 2

试试这个

	$("a").click(function(e) {
    var id = $(this).data('id');
    $("#"+id).removeClass('hidden').addClass("overlay-open");
});         
$(".closeoverlay").click(function() {   
    $(this).parent().removeClass("overlay-open");
    $(this).parent().addClass( "hidden" );  
});

.hidden{display:none;}
.overlay {
	width: 100%;
	height: 100%;
	margin: 20px;
	padding: 0;
	background-color: #915E36;
	position: fixed;
	top: 0px;
	z-index: 3;
	float: left;
	display: none;
	background-position: center center;
		box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}

.closeoverlay {
	float: right;
	width: 32px;
	height: 32px;
	padding: 10px;
	background-image: url(../images/icon_close.png);
	background-repeat: no-repeat;
	cursor: pointer;
	opacity: 1;
	
	}

.closeoverlay:hover {
	opacity: 0.8;
	}
	
	.overlay-open {
    display: block;
    animation: openoverlay linear 0.2s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: openoverlay linear 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: openoverlay linear 0.2s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -o-animation: openoverlay linear 0.2s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: openoverlay linear 0.2s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
	
}

@keyframes openoverlay {
    0% {
        opacity: 0;
        transform: translate(0px,200px)  scaleX(0.50) scaleY(0.50);
    }

    100% {
        opacity: 1;
        transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    };
}

@-moz-keyframes openoverlay {
    0% {
        opacity: 0;
        -moz-transform: translate(0px,200px)  scaleX(0.50) scaleY(0.50);
    }

    100% {
        opacity: 1;
        -moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    };
}

@-webkit-keyframes openoverlay {
    0% {
        opacity: 0;
        -webkit-transform: translate(0px,200px)  scaleX(0.50) scaleY(0.50);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    };
}

@-o-keyframes openoverlay {
    0% {
        opacity: 0;
        -o-transform: translate(0px,200px)  scaleX(0.50) scaleY(0.50);
    }

    100% {
        opacity: 1;
        -o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    };
}

@-ms-keyframes openoverlay {
    0% {
        opacity: 0;
        -ms-transform: translate(0px,200px)  scaleX(0.50) scaleY(0.50);
    }

    100% {
        opacity: 1;
        -ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    };
}


.overlay-close {
    display: block;
    animation: closeoverlay linear 0.2s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: closeoverlay linear 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: closeoverlay linear 0.2s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -o-animation: closeoverlay linear 0.2s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: closeoverlay linear 0.2s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
}

@keyframes closeoverlay {
    0% {
        opacity: 1;
        transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    }

    100% {
        opacity: 0;
        transform: translate(0px,100px)  scaleX(0.50) scaleY(0.50);
    };
}

@-moz-keyframes closeoverlay {
    0% {
        opacity: 1;
        -moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    }

    100% {
        opacity: 0;
        -moz-transform: translate(0px,100px)  scaleX(0.50) scaleY(0.50);
    };
}

@-webkit-keyframes closeoverlay {
    0% {
        opacity: 1;
        -webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(0px,100px)  scaleX(0.50) scaleY(0.50);
    };
}

@-o-keyframes closeoverlay {
    0% {
        opacity: 1;
        -o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    }

    100% {

        opacity: 0;
        -o-transform: translate(0px,100px)  scaleX(0.50) scaleY(0.50);
    };
}

@-ms-keyframes closeoverlay {
    0% {
        opacity: 1;
        -ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00);
    }

    100% {
        opacity: 0;
        -ms-transform: translate(0px,100px)  scaleX(0.50) scaleY(0.50);
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="button" data-id="overlay1">Open Overlay 1</a>	
<a href="#" class="button" data-id="overlay2">Open Overlay 2</a>	

<div class="overlay" id="overlay1"> Overlay 1
<div class="closeoverlay">X</div> 
</div>

<div class="overlay" id="overlay2"> Overlay 2
<div class="closeoverlay">X</div> 
</div>

使用jQuery和adClass / removeClass分别打开和关闭div

2 个答案: