asked on

Dragging A Modal Popup Extender when Position:Absolute Style Exists on Page

I have a user control that contains a modal popup extender. I would like to make the modal popup extender draggable, so I have set the drag properties of the modal popup extender appropriately. I can get this to work; the modal popup is draggable.

BUT, the drag/redrawing is not working properly. The modal popup "jumps" around on the page everytime I click on the drag handle of my modal popup.

I have tried troubleshooting this myself, and have determined that the master page style applied to the page with the user control is causing me my problems. I have my master page designed with <div> tags and styled in a style sheet, using lots of Position:Absolute style properties. If I take out the Position:Absolute style properties, then my popup modal drags properly.

I have tried to reset the Position:absolute css style in my modal popup style sheet, but this did not work; it got rid off all the position:aboslute settings in my master page as well, so everything looked goofy.

Any suggestions/comments would be appreciated; I would prefer not to have to redo my master page just to get my modals to be dragable.

qwerty021600

You need to share the code for this. As nothing can be judged without seeing the Problem.

Else try to give the position: fixed for the Modal popup.

farminsure

ASKER

Here is the CSS over the Modal Popup:
/* The main style of the panel */
.ModalPopup
{
    z-index: 1000;    
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;    
}
.modalBackground
{
   z-index: 999; 
   background-color: #6D7B8D; /* Blue Slate Gray */
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   min-height: 100%;
   min-width: 100%;
   filter:alpha(opacity=50);
   opacity:0.5;
   -moz-opacity: 0.5;
}  
 
This is how i tried resetting the position in the modal popup; but this seemed to reset all position styles, which messed up my master page style:
/* resets all css styles
*
{
    position:fixed;    
}
*/
 
Here are some of the styles from my Master Page...these seem to be the one's that mess up my Modal Popup:
 
.TopMenu
{
    position:absolute;
    left:2%;
    top:2%;
    color:White;
    width:80%;
}
#TopRow
{
    background-color:#41a9b2; /*teal*/
    left: 5%;
    top: 2%;
    position: absolute;
    width:90%;
    height:400px;
}
 
#TopRowLeft
{
    background-image: url('../MasterPages/Images/Topleft2_03_02.png');    
    background-repeat: repeat-x;
    width: 100%;    
    position: absolute;    
    height: 25%;
}
 
#TopRowMid
{
    background-image:url('../MasterPages/Images/Topangle3_03_02.png');
    background-repeat:no-repeat;
    width:25%;
    height:25%;
    position:absolute;
    left:60.4%;   
}
 
 
#TopRowRight
{
    background-image:url('../MasterPages/Images/Topright3_02.png');
    background-repeat:repeat-x;
    width:35%;
    height:25%;
    position:absolute;
    left:65%;  
}
 
#FBLogo
{
    position:absolute;   
    top:17%;
    left:7%;    
}
 
#MainBodySpacer
{
    padding-top:15%;
}
 
#MainBody
{
    width:100%;
    top:30%;
    background-color:#41a9b2; /* teal */ 
}
 
.tblMidSpace
{
    width:2%;
}
 
.tblMiddle
{
    padding-top:2%;
    padding-right:2%;
    padding-bottom:2%;
    padding-left:2%;
    
    background-image:url('../MasterPages/Images/whiteangle_03.png');
    background-repeat:no-repeat;
    background-position:left top;
    background-color:White;
}
 
.tblRight
{
    width:2%;
}

Open in new window

farminsure

ASKER

Here is the body of my Master Page:
<body>
    <form id="frmMain" runat="server">    
    <div id="TopRow">
        <div id="TopRowLeft"></div>
        <div id="TopRowMid"></div>
        <div id="TopRowRight"></div>
        <div class="TopMenu">
            <asp:Repeater ID="rptTopMenuLinks" runat="server" >
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                        <li>
                            <asp:HyperLink ID="hlnkTopMenuLink" runat="server" NavigateUrl='<%# Bind("URL") %>' Text='<%#Bind("DisplayName") %>'></asp:HyperLink>
                        </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>   
        </div>
        
        <div id="FBLogo">
            <asp:Image ID="imgFBLogo" runat="server" ImageUrl="~/MasterPages/Images/FB_03.png" />
            <asp:Image ID="imgFBText" runat="server" ImageUrl="~/MasterPages/Images/MFBtext_10.png" />
        </div>
        
        <div id="MainBodySpacer"></div>
        
        <div id="MainBody">
            <table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td class="LeftMenuTop" valign="top">
                        <asp:Image ID="imgTopLeftMenuAngle" runat="server" ImageAlign="Right" ImageUrl="~/MasterPages/Images/angle_03.png" />
                        <div id="cphLeftMenuContainer">
                            <asp:Repeater ID="rptLeftMenuLinks" runat="server" OnItemDataBound="rptLeftMenuLinks_ItemDataBound">
                                <HeaderTemplate>
                                    <table class="LeftMenuItems" cellpadding="0" cellspacing="0">
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <tr>
                                        <td>
                                            <ul>
                                                <li>
                                                    <asp:HyperLink ID="hlnkPageLink" runat="server" NavigateUrl='<%# Bind("URL") %>'
                                                        Text='<%#Bind("DisplayName") %>'></asp:HyperLink>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </table>
                                </FooterTemplate>
                            </asp:Repeater>
                            <asp:ContentPlaceHolder id="cphLeftBar" runat="server">      
                            </asp:ContentPlaceHolder>
                        </div>
                        <div id="HexContainer">
                            <asp:Image ID="imgBackMenuTopRight" runat="server" ImageUrl="~/MasterPages/Images/Hexagons_05.png" />
                        </div>
                    </td>
                    <td valign="top">
                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="tblMidSpace">&nbsp;</td>
                                <td class="tblMiddle">
                                        <asp:ContentPlaceHolder id="cphBody" runat="server">       
                                        </asp:ContentPlaceHolder>
                                </td>
                                <td class="tblRight">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="tblBottomSpaceGray">&nbsp;</td>
                    <td class="tblBottomSpaceTeal">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2" class="tblBottomMenu">                    
                        <ul>
                            <li><asp:LinkButton ID="lbtnHome" runat="server">HOME</asp:LinkButton></li>
                            <li><asp:LinkButton ID="lbtnContactWebAdmin" runat="server">CONTACT WEB ADMINISTRATOR</asp:LinkButton></li>
                            <li><asp:LinkButton ID="lbtnContactCustomerSupport" runat="server">CONTACT CUSTOMER SUPPORT</asp:LinkButton></li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>    
</body>

Open in new window

qwerty021600

This is a dummy example of Modal Popup
See if it can be of your use as use HTML code is not there

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
      <title>Demo 1: DHTML modal dialog box</title>

      <link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
      <style type="text/css">
      /* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */

#mainContainer{
            width:500px;
            margin:0 auto;
            margin-top:10px;
            border:1px double #000;
            padding:5px;

      }

      /* Alternative layout for the message box - used by one of the messages */

.modalDialog_contentDiv_error
{
            border:3px solid #FFF;
            padding:2px;
            z-index:100;/* Always needed      */
            position:absolute;      /* Always needed      */
            background-color:#F00;      /* White background color for the message */
            color:#FFF;
}

.modalDialog_contentDiv_error a
{
            color:#FFF;
}

h1
{
            margin-top:0px;
}

</style>

<link rel="stylesheet" href="css/modal-message.css" type="text/css">
<script type="text/javascript" src="js/modal-message.js"></script>

</head>
<body>
<form>
<div id="header"></div>
<div id="mainContainer">
            <p>This is a demo of the DHTML_modalMessage class. It displays a message at the center of the screen and disables all other page controls until the message is closed.</p>
            <a href="#" onclick="displayStaticMessage('<h1>Static message</h1><p>This is a static message</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>',false);return false">Message from url (example 1)</a><br>
            <a href="#" onclick="displayStaticMessage('<h1>Static message</h1><p>This is a static message</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>',false);return false">Message from url (example 2)</a><br>
            <a href="#" onclick="displayStaticMessage('<h1>Static message</h1><p>This is a static message</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>',false);return false">Alternative confirm dialog (example 3)</a><br>
            <p>The content of the two boxes above are loaded from external files. We have also specified that we want a drop shadow on them</p>
            <a href="#" onclick="displayStaticMessage('<h1>Static message</h1><p>This is a static message</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>',false);return false">Static Message (Example 1)</a><br>
            <a href="#" onclick="displayStaticMessage('<h1>Error message</h1><p>This is a static message with a different layout(css class)</p><p><a href=\'#\' onclick=\'closeMessage();return false\'>Close</a>','modalDialog_contentDiv_error');return false">Static Message (Example 2 - different layout)</a>
            <p>These last boxes are displaying static HTML. There are no shadows on these boxes. The last message box is assigned to a different CSS class than
            the other messages. This gives it a different look.</p>
<div class="clear"></div>
</div>
</form>
<script type="text/javascript">
messageObj = new DHTML_modalMessage();      // We only create one object of this class
messageObj.setShadowOffset(5);      // Large shadow

function displayMessage(url)
{

      messageObj.setSource(url);
      messageObj.setCssClassMessageBox(false);
      messageObj.setSize(400,200);
      messageObj.setShadowDivVisible(true);      // Enable shadow for these boxes
      messageObj.display();
}

function displayStaticMessage(messageContent,cssClass)
{
      messageObj.setHtmlContent(messageContent);
      messageObj.setSize(300,150);
      messageObj.setCssClassMessageBox(cssClass);
      messageObj.setSource(false);      // no html source since we want to use a static message here.
      messageObj.setShadowDivVisible(false);      // Disable shadow for these boxes
      messageObj.display();


}

function closeMessage()
{
      messageObj.close();
}

</script>

</body>
</html>

farminsure

ASKER

Here is the beginning of my modal popup code:
<cc1:ModalPopupExtender ID="mpeAddresses" runat="server"
        TargetControlID="lbtnPopupAddress" Drag="true" PopupDragHandleControlID="ModalDragHandle"
        PopupControlID="pnlPopupMailingAddress" BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender> 
    <asp:Panel ID="pnlPopupMailingAddress" runat="server" CssClass="ModalPopup" Style="display: none">
        <div id="ModalDragHandle" class="ModalHeader">
            <div class="content">
                Select Address
            </div>

Open in new window

farminsure

ASKER

I've adding a position style to my ModalPopup class, and took out the Display:Block in my Modal Popup class.
I tried all combinations of Position:Absolute and Position:Fixed in both my ModalBackground and ModalPopup class, but still not working properly. Everytime i click on the DragHandle of my Modal Popup, the popup moves on the screen; down and to the right a little; no matter if i drag it somewhere else or not.

ASKER CERTIFIED SOLUTION

farminsure

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial