Solved

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

Posted on 2009-04-08
7
4,912 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:farminsure
  • 5
  • 2
7 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24106144
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.
0
 

Author Comment

by:farminsure
ID: 24106393

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

0
 

Author Comment

by:farminsure
ID: 24106437

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

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 13

Expert Comment

by:qwerty021600
ID: 24106446
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>
0
 

Author Comment

by:farminsure
ID: 24106503

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

0
 

Author Comment

by:farminsure
ID: 24106579
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.
0
 

Accepted Solution

by:
farminsure earned 0 total points
ID: 24111044
I have ended up revising my master page to not use Position:Relative.
 
This has solved my modal popup issues.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question