0
我有三個圖標。當我點擊其中一個時,我會添加一個疊加層(如燈箱),然後彈出一個解釋該圖標的文本框,然後在單擊疊加層時隱藏文本框。當點擊框(jQuery)時隱藏文本框
我已經得到了一切,除非當我再次點擊框時,文本框不會再出現。我需要做些什麼刷新或什麼?
HTML:
<div class="serviceOption">
<a class="iconAnchor"> <i id="bigIcon" class="fa fa-laptop fa-3x" aria-hidden="true"></i></a>
<label for="serviceCheckbox"> Technology Audits</label>
</div>
<div id="techPopup" for="anchor1" class="popupBox">
<h2>HEADLINE 1</h2>
<p> Popup text 1<p>
</div>
<div class="serviceOption">
<a class="iconAnchor"><i id="bigIcon" class="fa fa-cloud fa-3x" aria-hidden="true"></i></a>
<label for="serviceCheckbox1"> Cloud Solutions</label>
</div>
<div id="cloudPopup" class="popupBox">
<h2>HEADLINE 2</h2>
<p> Popup text 2<p>
</div>
<div class="serviceOption">
<a class="iconAnchor"><i id="bigIcon" class="fa fa-envelope fa-3x" aria-hidden="true"></i></a>
<label for="serviceCheckbox2"> Email Solutions</label>
</div>
<div id="cloudPopup" class="popupBox">
<h2>HEADLINE 3</h2>
<p>Popup text 3</p>
</div>
和我的JQuery:
/* ----------- SERVICES TOGGLE ON SERVICES PAGE--------------- */
// 1. Create overlay and append it to body
var overlay = $('<div id=overlay></div>');
$('body').append(overlay);
$('.iconAnchor').click(function(){
var serviceParagraph = $(this).closest('.serviceOption').next('.popupBox');
overlay.show();
overlay.append(serviceParagraph);
serviceParagraph.slideDown();
}); // end ICON click
$(overlay).click(function(event){
$('.popupBox').slideUp(200);
overlay.hide();
}); // end OVERLAY click
這有效,但它遺漏了覆蓋。當我把它放回到我的腳本中時,它仍然存在與以前相同的問題: JQ: var overlay = $('
'); $('body')。append(overlay); $('。popupBox')。hide(); ('。iconAnchor')。click(function(){ var textBox = $(this).closest('。serviceOption')。next('。popupBox'); (overlay).append(textBox); overlay.show(); textBox.slideToggle(200); });點擊(功能(){(this).slideToggle(); overlay.hide(); }); – brandonstiles對不起,我也不會讓它格式化 – brandonstiles
我刪除了覆蓋部分b/c,這是沒有必要完成你所描述的。你需要一個額外的div來包裝這些彈出式div嗎? –