[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Modalpopup

Posted on 2011-05-12
10
Medium Priority
?
344 Views
Last Modified: 2012-05-11

I am trying to follow this sample. It pops up fine, but it does not cover the entire page with the gray background. Not sure why.
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                                BackgroundCssClass="modalBackground"
                                TargetControlID="LinkButton6"
                                PopupControlID="Panel1"
                                CancelControlID="LinkButton2" Drag="true">
    </cc1:ModalPopupExtender>
0
Comment
Question by:VBdotnet2005
  • 5
  • 4
10 Comments
 
LVL 7

Expert Comment

by:iopen
ID: 35751062
Have you set the BackgroundCssClass="modalBackground" in your CSS?
0
 

Author Comment

by:VBdotnet2005
ID: 35751157
Do I have to add CSS file separately?
0
 

Author Comment

by:VBdotnet2005
ID: 35751166
BackgroundCssClass="modalBackground"I already added above.

0
Industry Leaders: 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 7

Expert Comment

by:iopen
ID: 35751196
The following needs to be in your pages CSS file...


/*Modal Popup*/
.modalBackground {
      background-color:Gray;
      filter:alpha(opacity=70);
      opacity:0.7;
}
0
 
LVL 7

Accepted Solution

by:
iopen earned 500 total points
ID: 35751206
If you don't have an external css, you can have internal in you Head tags...

<head>
<style type="text/css">
.modalBackground {
      background-color:Gray;
      filter:alpha(opacity=70);
      opacity:0.7;
}
</style>
</head>
0
 

Author Comment

by:VBdotnet2005
ID: 35751638

ok. I added CSS file and got this message below.

/*Modal Popup*/
.modalBackground {
      background-color:Gray;
      filter:alpha(opacity=70);    <<<< validation(css.2.1) filter is a not know CSS property name
      opacity:0.7;                        <<<< validation(css.2.1) filter is a not know CSS property name

}
0
 

Author Comment

by:VBdotnet2005
ID: 35751959
ok. I tried it anyway. It still won't gray out. The page is inside masterpage, and in contentplace holder, place holder and then panel.
0
 
LVL 7

Assisted Solution

by:iopen
iopen earned 500 total points
ID: 35752050
You can ignore the validation message. filter and opacity are not errors and will not throw an error, its just that some browsers wont recognise them and ignore.

If your css file is correctly referenced in your Master page Head tag or your Heads ContentPlaceHolder then it should work, can you show us your code so I can help further...
0
 
LVL 14

Expert Comment

by:dejaanbu
ID: 35759728
also clear your browser cache and check once again
0
 

Author Comment

by:VBdotnet2005
ID: 35770670
Still not workin. I have something like this. I can open Modal, but CSS does not seem to work?

1.  


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

   <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
         <link href="../App_Themes/Theme1/mycssfile.css" rel="stylesheet" type="text/css" media="screen"/>
   

<asp:UpdatePanel ID="UpdatePanel3" UpdateMode="Conditional" runat="server">  

<asp:PlaceHolder ID="PlaceHolder1" runat="server">        
 
  <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup"  Width="720px" Height="300px" BorderStyle="solid" BorderColor="Black" BackColor="#ffffff">
      <br />    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
            <ContentTemplate>
             <asp:TextBox ID="txtfirstname_1" runat="server"></asp:TextBox>
              <cc1:TextBoxWatermarkExtender ID="txtfirstname_TextBoxWatermarkExtender"
                    runat="server" Enabled="True" TargetControlID="txtfirstname_1"
                    WatermarkText="Firstname">
                </cc1:TextBoxWatermarkExtender>
                <asp:TextBox ID="txtlastname_1" runat="server"></asp:TextBox>
              <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender4"
                    runat="server" Enabled="True" TargetControlID="txtlastname_1"
                    WatermarkText="Lastname">
                </cc1:TextBoxWatermarkExtender>
             
       
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
                    AllowSorting="True" AlternatingRowStyle-Wrap="True" AutoGenerateColumns="False"
                    AutoGenerateEditButton="True" DataKeyNames="id"
                    DataSourceID="SqlDataSource2" Font-Size="Small" FooterStyle-Font-Size="Medium"
                    PageSize="10" Width="698px">
                    <Columns>
               
            </Columns>
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="LinkButton5" CommandArgument='<%#Container.DataItemIndex%>' CommandName="reloadparent" runat="server">Select</asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                       
                     
                        <asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
                                            <asp:BoundField DataField="username" HeaderText="username"
                            SortExpression="username"/>
                     
                    </Columns>
                    <FooterStyle />
                    <AlternatingRowStyle />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource2" runat="server"
                ConnectionString="<%$ ConnectionStrings:myConnectionString %>"        
                              SelectCommand="my select"
                              >
                <SelectParameters>
                    <asp:QueryStringParameter Name="clientacct" QueryStringField="clientacct"
                        Type="String" />
                </SelectParameters>
               
            </asp:SqlDataSource>
        </ContentTemplate>
       
        </asp:UpdatePanel>
           
      <asp:LinkButton ID="LinkButton2" runat="server">Close</asp:LinkButton>  
  </asp:Panel>&nbsp;
  </asp:PlaceHolder>


etc ....







2.




body
{
   margin:0;
   padding:0;
   border:none;
}

    /*Modal Popup*/
.modalBackground
{
    background-color: #C0C0C0;
    -ms-filter: alpha(opacity=70);
    -ms-opacity: 0.7;
}

.modalPopup
{
    background-color: #FF0066;
    border-width: 1px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 870px;
    overflow: auto;
}








 
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Suggested Courses

872 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