Solved

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

Posted on 2009-04-08
7
4,780 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now