Question

I am working on simple jquery modal. I want to perform onclick event in a overlay behind the modal. Here is the link for modal. When user clicks outside the modal i need to close the modal. Here is the code.

#basic-modal-content {display:none;}

    /* Overlay */
    #simplemodal-overlay {background-color:#000; cursor:wait;}
    
    /* Container */
    #simplemodal-container {height:300px; width:600px; color:#bbb; background-color:#FFF; border:6px solid #72A014;border-radius:12px;-webkit-border-radius:12px;-moz-border-radius:12px; padding:12px;}
    #simplemodal-container .simplemodal-data {padding:8px;}
    #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
    #simplemodal-container a {color:#ddd;}
    #simplemodal-container a.modalCloseImg {background:url(close.png) no-repeat; width:40px; height:40px; display:inline; z-index:3200; position:absolute; top:-20px; right:-23px; cursor:pointer;}
    #simplemodal-container h3 {color:#84b8d9;}

When user clicks on overlay the modal needs to be closed. Is there any method to track the onclick event outside modal and close it??

Hope my question is clear. Thanks in Advance!!

Answer 1

Bind an event to #simplemodal-overlay

$("#simplemodal-overlay").click(function(){
//code to remove the overlay , same as on the close btn
});

But i didnt understand why that wait cursor on overlay.?