1. 程式人生 > >前端開發日記之點選懸浮框之外的地方隱藏懸浮框

前端開發日記之點選懸浮框之外的地方隱藏懸浮框

本次遇見的問題是:在拒絕訂單時,頁面彈出了一個懸浮框用於輸入拒絕理由。需要我做的是:彈出懸浮框時,點選頁面其它位置時會將懸浮框隱藏。

在此處貼出程式碼:

//拒絕彈出框在點選彈出框其它位置時,隱藏彈出框
            $(document).on('click',function(e){ 
	            if($('.reason').css('display')=="none")//reason為彈出框的className,為減少客服端壓力,如果原來就是隱藏的直接返回
	            	return;	
	            var e = e || window.event; //瀏覽器相容性 ,IE為window.event
	            var elem = e.target || e.srcElement; //IE為e.srcElement
	            if(elem.className=='ref')//ref為頁面中的拒絕按鈕,點選拒絕按鈕時會彈出懸浮框;如果點選的ref就直接返回,不然懸浮框就永遠彈不出來
	            	return;
	            while (elem) { //迴圈判斷至跟節點,防止點選的是div子元素 
		            if (elem.className && elem.className=='reason') { 
		            	return; 
		            } 
	            	elem = elem.parentNode; 
	            } 
	            $('.reason').css('display','none'); //點選的不是div或其子元素 
            });