私はthickbox.jsと呼ばれる1つのjQueryポップアップライブラリを使用しています。
私のページに小さな画像が1つあります。ユーザーがこの画像をクリックすると、何らかの関数が呼び出され、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コンソールから取得しました:
<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();
}
}
});
私が試した2番目のコードは次のとおりです。
$(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コンソールでエラーや警告が表示されませんでした。
私が試した3番目のコードスニペット:
$(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コンソールでエラーや警告は表示されませんでした。
私はポップアップにどんな種類のプラグインも使用しませんが、私はあなたのための簡単な解決策を持っています。トリガー時に、ポップアップの横にある空のマスクをフェードインし、マスクをフェードアウトのエージェントにします。下に示された。
$(function(){
$('.clickme').click(function(){
$('.popup,.mask').fadeIn();
});
$('.mask').click(function(){
$('.popup,.mask').fadeOut();
});
});
.clickme{
display:inline-block;
cursor:pointer;
padding:10px;
background:#00cfff;
color:#fff;
}
.mask{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
z-index:2;
display:none;
}
.popup{
display:none;
position:fixed;
top:20px;
left:20px;
width:100px;
height:100px;
background:#d30043;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='outer'>
<span class='clickme'>Click Me</span>
<div class='mask'></div>
<div class='popup'>I am a Popup</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加