mrgraphy
دوشنبه 27 شهریور 1391, 12:27 عصر
سلام.
چنین چیزی خیلی ساده هست.
شما باید توسط متد کلیک توی جی کوئری این کارو انجام بدی به این صورت که یه آیدی یا کلاس واسه ی اون پاپ آپ در نظر بگیری و بگی هرجا کلیک شد غیر از این پاپ آپ بسته بشه.
چند تا راه داره من یه مثال واسه شما مینیویسم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).click(function(){
alert('you clicked out side of popup');
});
$('.popup').click(function(e) {
e.stopPropagation();
alert('in pop up');
});
});
</script>
<style type="text/css">
.popup {
width:200px;
height:120px;
position:absolute;
background:#CCC;
border: 2px solid #F00;
top:45%;
left:45%;
}
</style>
</head>
<body>
<div class="popup"></div>
</body>
</html>
این صفحه یک div در وسطش قرار داره که اگر روی div کلیک کنی در alert به شما میده که in popup و اگر هر جایی غیر از اون کلیک کنی یک alert دیگه.
این چطوری کار میکنه؟
این طوری که تعریف کردم اگر روی سند یا document کلیک شد یک alert نشون بده اما مسئله اینکه همه چیز حتی اون div هم جزء سند حساب میشن واگر رو ی اون کلیک بکنیم باید بازم باید alert رو به ما نشون بده.
برای جلوگیری از این کار اومدم یک event دیگه واسه ی خود popup نوشتم که اگر روی اینpopup کلیک شد هیچ اتفاقی توی سند نیوفته . چطوری؟ با استفاده از stoppropagation.
این متد میاد جلوی انتشار همه ی event های قبلی رو میگیره و نمیازه اتفاقی بیوفته و بعد از این متد اگر کدی بنویسید اجرا میشه.
امیدوارم کمکتون کرده باشم.