Modal dialog box in jQuery

Question

Hi all,

       When the dialog box is opened, not be operated outside of it, can only operate within the dialog box?

 

My codes:

 

 

<script type="text/javascript">

$(document).ready(function () {

$('.dialog').hide();

 

$("#moveBar").mousedown(function (event) {

var bMove = true;

var abs_x = event.pageX - $('div.dialog').offset().left;

var abs_y = event.pageY - $('div.dialog').offset().top;

 

$(document).mousemove(function (event) {

 

if (bMove) {

var obj = $('div.dialog');

obj.css({

'left': event.pageX - abs_x,

'top': event.pageY - abs_y

});

 

var a = $('div.dialog').offset().left + 652;

if ($('div.dialog').offset().left < 0 || $('div.dialog').offset().top < 0) {

obj.css('left', 0);

obj.css('top', 0);

}

if (a >= $(window).width()) {

obj.css('left', $(window).width() - 652);

}

}

}).mouseup(function () {

bMove = false;

});

});

$('#openDialog').click(function () {

$('div.dialog').show();

});

$('#cancel').click(function () {

$('div.dialog').hide();

});

});

</script>

<style type="text/css">

.dialog{

position:absolute;

width:652px;

height:500px;

background-color:#F6F6F6;

border:solid 5px #5A5A5A;

}

#moveBar

{

background:#FF6600;

cursor:move;

text-align:center;

height:30px;

}

.footer

{

margin-top:350px;

background-color:#48B960;

text-align:center;

}

</style>

 

<input id="openDialog" type="button" value="Call Dialog" />

<div class="dialog">

<div id="moveBar">

<span>Move Bar</span>

</div>

<p>This is contents...</p>

<div class="footer"><span><input id="cancel" type="button" value="Cancel"/></span></div>

</div>

 

Thanks.