当绿色弹出窗口打开然后单击蓝色弹出窗口时,它会关闭绿色并打开蓝色弹出窗口。
链接
<li><a id="contactBtn" class="active" href="javascript: void(0)" ng-click="showForm()">Kontakt</a></li>
<li><a id="faceBtn" class="active" href="javascript: void(0)" ng-click="showFace()">Facebook</a></li>
和AngularApp
$scope.showForm = function () {
$('.contactRow').slideToggle();
};
$scope.closeForm = function () {
$('.contactRow').slideUp();
};
$scope.showFace = function () {
$('.facebook').slideToggle();
};
$scope.closeFace = function () {
$('.facebook').slideUp();
};
我还添加了一些jQuery来制作灯箱效果
$("#contactBtn, #faceBtn").click(function(){
$('#overlay').animate({'opacity':'0.7'}, 300, 'linear');
$('#overlay').css('display','block');
});
$('#closeForm, #closeFace').click(function(){
$('#overlay').animate({'opacity':'0'}, 300, 'linear', function(){
$('#overlay').css('display','none');
});
});
现在有一个很好的方法将这些全部绑定在一起,让我们说你打开绿色(灯箱效果动画)然后你决定点击蓝色它删除绿色窗口和灯箱效果保持和蓝色打开,当你点击蓝色链接再次关闭+(灯箱)。
或者我让事情变得太复杂。
编辑: 新的AngularApp
// onclick event handlers
$scope.showForm = function () {
$('.contactRow').slideToggle();
if($(".facebook").is(":visible"))
{
$('.facebook').hide();
}
};
$scope.closeForm = function () {
$('.contactRow').slideUp();
};
//FACEBOOK
$scope.showFace = function () {
$('.facebook').slideToggle();
if($(".contactRow").is(":visible"))
{
$('.contactRow').hide();
}
};
$scope.closeFace = function () {
$('.facebook').slideUp();
};
当你按下facebook链接一旦弹出窗口打开然后再次按下它,但用jquery制作的灯箱效果不会消失,直到我按下X.
答案 0 :(得分:1)
如果表单可见或不显示,这是除了滑动toogle.check之外的其他方法 试试这样的事情
if($(".contactRow").is(":visible"))
{
$('.contactRow').hide();
}
else
{
$('.facebook').hide();
$('.contactRow').show();
}
你也可以为facebook类做同样的事情。检查它是否可见或不可见,然后采取相应行动..