我正在使用一个名为 thickbox.js 的 jQuery 弹出库。
页面上有一张小图片。当用户点击这张图片时,会调用某个函数,thickbox.js 库会即时创建弹出窗口的 HTML/CSS 并显示弹出窗口。
最重要的是,当弹出窗口显示时,如果查看页面的 HTML 源代码,我无法看到弹出窗口的 HTML 代码。我尝试通过 Firebug 控制台检查元素来查看弹出窗口的 HTML 源代码,然后我可以看到弹出窗口的 HTML 源代码。这表明 DOM 不包含弹出框的 HTML 代码。
现在我的问题是,如果用户在页面上除了弹出框区域以外的任何地方单击,我希望关闭这个打开的弹出框。我尝试了几种代码,但不幸的是它们不能完成我想要做的事情。现在我对这个问题感到茫然。以下是您参考的代码:
以下是动态生成的弹出式HTML。我从Firebug控制台中获取:
```html
我尝试的第二段代码如下:
以上两段代码片段存在的问题是,当用户点击图像时,弹出窗口不会打开。并且我在 Firebug 控制台中没有收到任何错误或警告。
我尝试的第三个代码片段:
我遇到的问题是,如果用户在弹出窗口以外的页面任何地方点击,弹出窗口就会关闭,但当用户再次点击图像显示弹出窗口时,它不会再次出现。这一次,我在Firebug控制台中也没有收到任何错误或警告。
页面上有一张小图片。当用户点击这张图片时,会调用某个函数,thickbox.js 库会即时创建弹出窗口的 HTML/CSS 并显示弹出窗口。
最重要的是,当弹出窗口显示时,如果查看页面的 HTML 源代码,我无法看到弹出窗口的 HTML 代码。我尝试通过 Firebug 控制台检查元素来查看弹出窗口的 HTML 源代码,然后我可以看到弹出窗口的 HTML 源代码。这表明 DOM 不包含弹出框的 HTML 代码。
现在我的问题是,如果用户在页面上除了弹出框区域以外的任何地方单击,我希望关闭这个打开的弹出框。我尝试了几种代码,但不幸的是它们不能完成我想要做的事情。现在我对这个问题感到茫然。以下是您参考的代码:
<a href="#" onclick="return $Core.box('prj_name.contactform', 400);">
<!-- This is the function call which generates the pop-up HTML on the fly -->
<img width="33" height="89" align="middle" border="0" pagespeed_url_hash="3893298907" alt="" src="http://58.189.67.789/theme/frontend/foxplus/style/default/image/layout/contact.jpeg">
</a>
以下是动态生成的弹出式HTML。我从Firebug控制台中获取:
```html
以下是动态生成的弹出式HTML。我从Firebug控制台中获取:
```<div class="js_box_image_holder_full ">
<div id="js_box_id_3" class="js_box " style="width: 400px; top: 15%; left: 69%; margin-left: 0px; margin-top: 278px; z-index: 5003; display: block;">
<div class="js_box_title">Contact</div>
<div class="js_box_content">
<style type="text/css">#js-contact-message:after{content:'\1f603'}</style>
<div id="js_contact_message">Your details submit succesfully</div>
<div id="js_contact_error_message"></div>
<iframe style="display:none" name="js_contact_frame" id="js_contact_frame" frameborder="1" width="100%"> </iframe>
<div class="main_break">
<form method="post" action="http://58.189.67.789/prj_name/contact/" id="js_contact_form" target="js_contact_frame">
<div class="table">
<div class="p_left">
<label for="email">Full Name</label>
</div>
<div class="p_right">
<input name="val[full_name]" id="full_name" value="" size="60" type="text">
</div>
<div class="clear"></div>
</div>
<div class="table">
<div class="p_left">
<label for="email">Email</label>
</div>
<div class="p_right">
<input name="val[email]" id="email" value="" size="30" type="text">
</div>
<div class="clear"></div>
</div>
<div class="table">
<div class="p_left">
<label for="text">Message</label>
</div>
<div class="p_right">
<textarea name="val[text]" id="text"></textarea>
</div>
<div class="clear"></div>
</div>
<div class="table" style="display:none;">
<div class="p_left">Send Yourself a Copy</div>
<div class="p_right">
<input name="val[copy]" value="1" type="checkbox">
</div>
<div class="clear"></div>
</div>
<div class="table_clear">
<input value="Submit" class="button" type="submit">
<div class="t_right"><span id="js_comment_process"></span></div>
</div>
</form>
</div>
<div class="js_box_title_store">Contact</div>
</div>
<div style="display: block;" class="js_box_close">
<a href="#" onclick="return js_box_remove(this);">x</a>
<span class="js_box_history">prj_name.contactform</span>
</div>
</div>
我尝试的jQuery代码如下:
$('body').click(function(e) {
if( $('.js_box_image_holder_full').length ) {
if (!$(e.target).closest('.js_box_image_holder_full').length) {
$('.js_box_image_holder_full').hide();
}
}
});
我尝试的第二段代码如下:
以下是我尝试的第二个代码:
$(document).click(function(event) {
if(!$(event.target).closest('.js_box_image_holder_full').length) {
if($('.js_box_image_holder_full').is(":visible")) {
$('.js_box_image_holder_full').hide()
}
}
})
以上两段代码片段存在的问题是,当用户点击图像时,弹出窗口不会打开。并且我在 Firebug 控制台中没有收到任何错误或警告。
我尝试的第三个代码片段:
$(document).mouseup(function (e) {
var container = $(".js_box");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".js_box_image_holder_full").remove();
}
});
我遇到的问题是,如果用户在弹出窗口以外的页面任何地方点击,弹出窗口就会关闭,但当用户再次点击图像显示弹出窗口时,它不会再次出现。这一次,我在Firebug控制台中也没有收到任何错误或警告。