Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# CSS ASP.NET4.0
i am using a web user control and there is a modal popup, i want to add css to the modal popup.
i have googled this topic but haven't get any fruitful answer. Please give me some proper solution through which i can use css to web user control.
 
Thanks in advance. Code given below:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopupLoginControl.ascx.cs" 
Inherits="Ajax_PopupLoginControl" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
 
<script type="text/css" src="<%= ResolveUrl("../css/style.css") %>"></script> 
<link href="../css/style.css" rel="stylesheet" type="text/css" /> 
 
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" /> 
<ajaxtoolkit:ModalPopupExtender BackgroundCssClass="modalBackground" CancelControlID="btnClose"  runat="server" PopupControlID="Panel1" ID="ModalPopupExtender1" TargetControlID="btnShowPopup" /> 
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" DefaultButton="btnOk"> 
<table width="100%" border="0" cellpadding="2" cellspacing="5"> 
   <tr > 
      <td style="width:35%;padding-removed50px;"> </td> 
      <td style="background:removed(../images/item_box.gif) repeat-x;"> 
          <asp:Label id="labMsg" runat="server" /> Username : admin Password : admin 
      </td>
   </tr>
   <tr>
      <td align="right" valign="middle"> Email Id : </td> 
      <td>
          <asp:TextBox ID="txtLogin" runat="server"> 
      </td>
   </tr> 
   <tr>
      <td align="right" valign="middle"> Password : </td>
      <td>
         <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"> 
      </td>
   </tr>
   <tr>
      <td> </td>
      <td> 
        <asp:Button ID="btnOk" OnClick="Login" runat="server" Text="Sign In" /> 
        <asp:Button ID="btnClose" runat="server" Text="Cancel" /> 
      </td> 
   </tr>
</table>
Posted 9-Jul-12 19:10pm
Edited 9-Jul-12 20:13pm
v2
Comments
Sergey Alexandrovich Kryukov at 10-Jul-12 1:35am
   
CSS (style sheet) or a style?
--SA
biswarup88 at 10-Jul-12 1:58am
   
Sergey Alexandrovich Kryukov i want to apply css
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I am assuming that you are using Modal Popup Extender from AJAX Control Toolkit. Add below property to your Modal Popup:
BackgroundCssClass="modalBackground"
 
CSS can be defined in your CSS Class and referred in the above property.
 
.modalBackground
{
    background-color:
    filter:alpha(opacity=70);
    opacity:0.7;
}
 
For more information look at below links:
 
Modal Popup Extender Basics[^]
ModalPopup Extender[^]
  Permalink  
Comments
biswarup88 at 10-Jul-12 1:20am
   
Thanks for you reply; i have used above code to apply css in modal popup extender.
But it is not working in web user control.
JimJos at 10-Jul-12 1:43am
   
The web user control is your own control? Please provide the code for that control also..
biswarup88 at 10-Jul-12 1:44am
   
Here is my web user control code
 
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopupLoginControl.ascx.cs"
Inherits="Ajax_PopupLoginControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<script type="text/css" src="<%= ResolveUrl("../css/style.css") %>"></script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<ajaxtoolkit:ModalPopupExtender BackgroundCssClass="modalBackground"
CancelControlID="btnClose" runat="server" PopupControlID="Panel1" ID="ModalPopupExtender1"
TargetControlID="btnShowPopup" />

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" DefaultButton="btnOk">
<table width="100%" border="0" cellpadding="2" cellspacing="5">
<tr >
<td style="width:35%;padding-top:50px;">
</td>
<td style="background:url(../images/item_box.gif) repeat-x;">
<asp:Label id="labMsg" runat="server" />
Username : admin
Password : admin
</td>
</tr>
<tr>
<td align="right" valign="middle">
Email Id :
</td>
<td>
 <asp:TextBox ID="txtLogin" runat="server">
</td>
</tr>
<tr>
<td align="right" valign="middle">
Password :
</td>
<td>
 <asp:TextBox ID="txtPassword" runat="server" TextMode="Password">
</td>
</tr>
<tr>
<td>

</td>
<td>
<asp:Button ID="btnOk" OnClick="Login" runat="server" Text="Sign In" />
<asp:Button ID="btnClose" runat="server" Text="Cancel" />
</td>
</tr>
</table>
Vani Kulkarni at 10-Jul-12 2:15am
   
Try keeping modalBackground CSS class in this page for testing purpose, see if it works.
biswarup88 at 10-Jul-12 5:14am
   
I have also try your mentioned method but it doesn't work.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

VS2010 adds this DOCTYPE by default -
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Change it to
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

This solves the issue. Stylesheet gets applied properly !!!
  Permalink  
Comments
Vani Kulkarni at 10-Jul-12 6:03am
   
Interesting did not know about this.
biswarup88 at 10-Jul-12 7:17am
   
it works..[:)]
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

include your css file to master page or main page which is contain web user control thats it...
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 310
1 Sergey Alexandrovich Kryukov 192
2 PhilLenoir 164
3 Richard MacCutchan 160
4 Sharmanuj 146
0 Sergey Alexandrovich Kryukov 6,077
1 OriginalGriff 5,115
2 CPallini 2,473
3 Richard MacCutchan 1,597
4 Abhinav S 1,505


Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 11 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100