需求:頁(yè)面中有個(gè)小問(wèn)號(hào)伟姐,點(diǎn)一下彈出一個(gè)說(shuō)明框罚拟,再點(diǎn)其他地方消失,且如果其他地方有a標(biāo)簽的話不去觸發(fā)a標(biāo)簽的href鏈接驱敲;
先來(lái)看一下效果:
1.點(diǎn)擊問(wèn)號(hào)铁蹈,彈出說(shuō)明框;
2.點(diǎn)擊頁(yè)面中其它任何一個(gè)部分众眨,都不觸發(fā)任何事件握牧,只會(huì)先讓說(shuō)明框消失;
需要注意的是娩梨,這并不是一個(gè)真正的帶陰影的dialog沿腰,所以點(diǎn)擊其它地方還是容易觸發(fā)其他事件的,來(lái)看一下js代碼處理:
$('a').on('click',function () {
if($('.answer-dialog').css('opacity') == 1){
$('.answer-dialog').css({'transform':'scale(0.01)','opacity':0});
return false;
//這個(gè)是重要的狈定,其實(shí)這種方式很多時(shí)候都會(huì)用到颂龙,只是在這里不容易想到而已;
}
});
$('.answer').on('click',function (e) {
e.stopPropagation();
$(this).find('.answer-dialog').css({'transform':'scale(1)','opacity':1});
});
$('html,body').on('click',function (e) {
e.stopPropagation();
$('.answer-dialog').css({'transform':'scale(0.01)','opacity':0});
});