Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    wierdness using transparency to hide mouse clicks

    I'm using DIVs to display floating modal dialogs and I want to prevent the user from clicking behind the dialog (the parent area). I'm having a wierd problem. Below are two examples, one which works (the please wait dialog) and the other which does not (the pseudo dialog).

    The parent of the modal dialog has a table and where the rows can be clicked on. I don't want the user to change rows while the dialog is showing. I've got a transparent DIV which is as wide as the parent document and intercepts mouse clicks (but not keyboard entry... another time perhaps).
    The 'please wait' dialog works perfectly, but the pseudo dialog only intercepts the mouse clicks when the user clicks on an empty space in the table. If there's text where the user clicks, then the clicks go to the table instead of the pseudo dialog. Any ideas?

    <!-- please wait dialog -->
    <div id='wait' style="display:none;width:100%;height:100%;position:absolute;z-index:10">
    <table width='100%' height='100%' cellpadding=0 cellspacing=0>
    <tr>
    <td align="center" valign="middle">
    <center><img src='img/waittimer.gif' ondblclick="hideWait()"></center>
    </td>
    </tr>
    </table>
    </div>
    <!-- pseudo dialog -->
    <div id='dlg' style="display:none;position:absolute;width:100%;height:100%;z-index:11;" >

    <div id='modal-content' class='dialog' style='display:block;z-index:12'
    onmousedown='dragbar_down(event)' onmouseup='dragbar_up(event)' onmousemove='dragbar_move(event)'>
    <table cellpadding='0' cellspacing='0' width='100%' height='100%'>
    <tr><td id='frametitle' class='dialogTitle'></td></tr>
    <tr>
    <td>
    <iframe marginheight="0" id='dlgframe' name='dlgframe' width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
    </td>
    </tr>
    </table>
    </div>
    </div>

    <!-- end pseudodialog -->
    Attached Images Attached Images
    Last edited by wac; 03-10-2005 at 10:04 PM.
    Wayne Christian


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •