вот тебе два варианта, жду пива
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.backing {
position: fixed;
width: 100%;
height: 100%;
z-index: 100;
background-color: green;
opacity: 0.2;
display: none;
}
.form {
position: relative;
z-index: 101;
display: none;
background-color: yellow;
}
</style>
<div class="backing"></div>
<button class="but">show/hide form</button>
<a href="#">link</a>
<button onclick="alert('click')">click</button>
<form class="form">
<input/><br/>
<input/><br/>
<input type="submit"/>
</form>
<script>
jQuery(function ($) {
$(".but").on("click", function () {
$(".form").toggle();
$(".backing").show();
});
$(".backing").on("click", function (e) {
$(".form").toggle();
$(this).hide();
var elem = document.elementFromPoint(e.clientX, e.clientY);
if (elem.className != "but") {
elem.click();
}
});
});
</script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.form {
position: relative;
z-index: 101;
display: none;
background-color: yellow;
}
</style>
<div class="backing"></div>
<button class="but">show/hide form</button>
<a href="#">link</a>
<button onclick="alert('click')">click</button>
<form class="form" onclick="event.stopPropagation()">
<input/><br/>
<input/><br/>
<input type="submit"/>
</form>
<script>
jQuery(function ($) {
$(document).on("click", function () {
$(".form").hide();
});
$(".but").on("click", function (e) {
$(".form").toggle();
e.stopPropagation();
});
});
</script>