We help IT Professionals succeed at work.

CSS for Popup in ASP.NET

jknj72
jknj72 asked
on
487 Views
Last Modified: 2017-04-21
I have alot of Popups in my program and I would like to make them a little more uniform so I am trying to set properties for when my Popups  show but I want to set the top Title bar to be the same for each one. I want the Title of my Popups to look like this..

Popup Title bar
Here is thes tyle and script for it but I dont know how to apply the <th> (Im assuming) to my popup controls??? In the ShowPopup funtion it is setting the title of the Popup but I cant get the Title the same way in my version

Here is the original style
<style type="text/css">
    table
    {
        border: 1px solid #ccc;
        border-collapse: collapse;
        background-color:#fff;
        font-size: 10pt !important;
        font-family: Arial !important;
    }
    table th
    {
        background-color: #B8DBFD;
        color: #333;
        font-weight: bold;
    }
    table th, table td
    {
        padding: 5px;
        /*border: 1px solid #ccc;*/
    }
    table, table table td
    {
        border: 0px solid #ccc;
    }
</style>

 <script type="text/javascript">
        $(function () {
            $("[id*=btnShowPopup]").click(function () {
                ShowPopup();
                return false;
            });
        });
        function ShowPopup() {
            $("#dialog").dialog({
                title: "GridView",
                width: 450,
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        }
    </script>

Open in new window


And here is how I am trying to use it in my program???
/*Popup Control Gridview*/
.popupGridviewTable {
    border: 1px solid #ccc;
    border-collapse: collapse;
    background-color:#fff;
    font-size: 10pt !important;
    font-family: Arial !important;
}

.popupGridviewTable th
    {
        background-color: #B8DBFD;
        color: #333;
        font-weight: bold;
        height:30px;
    }

.popupGridviewTable table th, table td
    {
        padding: 5px;
        /*border: 1px solid #ccc;*/
    }
.popupGridviewTable table, table table td
    {
        border: 0px solid #ccc;
    }

Open in new window


Everything else works but I cant get the title or th to be set??

Thanks for any help
Comment
Watch Question

Shaun KlineLead Software Engineer
CERTIFIED EXPERT

Commented:
The original CSS used Tag level styles, while your version is using class level styles. To use your styles, you would need to add class="popupGridviewTable" to the top level container (table) tag.

Author

Commented:
ok I get what your saying. I am trying to set the image I have in my 'popupGridviewTable title'  but cant figure out how to connect the two?

heres my css code and im trying to use the title
/*Popup Control Gridview*/
.popupGridviewTable {
    border: 1px solid #ccc;
    border-collapse: collapse;
    background-color:#fff;
    font-size: 10pt !important;
    font-family: Arial !important;
}

.popupGridviewTable title {
    border: 1px solid #4297d7;
    background: #2191c0 url('../../images/ui-bg_gloss-wave_75_2191c0_500x100.png') repeat-x 50% 50%;
    color: #eaf5f7;
    font-weight: bold;
}

.popupGridviewTable th
    {
    background-color: #B8DBFD;
    color: #333;
    font-weight: bold;
    height:30px;
    }

.popupGridviewTable table th, table td
    {
        padding: 5px;
        /*border: 1px solid #ccc;*/
    }
.popupGridviewTable table, table table td
    {
        border: 0px solid #ccc;
    }

Open in new window


and here is my markup. How would I connect to the popGridviewTable title?
    <cc1:ModalPopupExtender ID="mde" BehaviorID="mpe" runat="server" Drag="true" PopupDragHandleControlID="divPopupWeekDay" PopupControlID="divPopupWeekDay" TargetControlID="lnkDummy" 
        BackgroundCssClass="">
    </cc1:ModalPopupExtender>

    <div id="divPopupWeekDay" class="popupGridviewTable" style="display: block;font-size:12px;height:auto;width:auto;">
        <table class="popupGridviewTable">
            <tr class="??" style="font-size: medium; font-weight: bold;">
                <td class="??">
                    <div style="float:right;padding-right:10px;">
                        <asp:Label ID="Label16" runat="server" Text="Status" Font-Bold="True" Font-Size="Small"></asp:Label>
                        &nbsp;&nbsp;
                        <asp:Image ID="Image1" runat="server" ImageAlign="Top"/>
                    </div>
                    Gridview</td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="gvPopupWeekDay" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource9" GridLines="None"> 
                        <Columns>
                            <asp:BoundField DataField="CVGID" HeaderText="CVG ID" SortExpression="CVGID"></asp:BoundField>
                            <asp:BoundField DataField="NameOfRisk" HeaderText="Name Of Risk" SortExpression="NameOfRisk"></asp:BoundField>
                            <asp:BoundField DataField="Street" HeaderText="Street" SortExpression="Street"></asp:BoundField>
                            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City"></asp:BoundField>
                            <asp:BoundField DataField="State" HeaderText="State" SortExpression="State"></asp:BoundField>
                            <asp:BoundField DataField="Zip" HeaderText="Zip" SortExpression="Zip"></asp:BoundField>
                            <asp:CheckBoxField DataField="Insp_Aud" HeaderText="Insp/Aud" SortExpression="Insp_Aud"></asp:CheckBoxField>
                            <asp:CheckBoxField DataField="VNI_VNA" HeaderText="Visited Not Insp/Aud" SortExpression="VNI_VNA"></asp:CheckBoxField>
                            <asp:BoundField DataField="ApprovedBy" HeaderText="Approved By" SortExpression="ApprovedBy"></asp:BoundField>
                        </Columns>
                    </asp:GridView>
                    
                    <cc1:RoundedCornersExtender ID="gvPopupWeekDay_RoundedCornersExtender" runat="server" BehaviorID="gvPopupWeekDay_RoundedCornersExtender" TargetControlID="gvPopupWeekDay" />
                    
                </td>
            </tr>
            <tr>
                <td style="text-align:center">
                    <asp:Button ID="btnPopClose" runat="server" text="Close" OnClientClick="return HideModalPopup()" BackColor="#46A3FF" Font-Bold="True" Font-Size="Larger" ForeColor="White" />        
                    <cc1:RoundedCornersExtender runat="server" BehaviorID="btnPopClose_RoundedCornersExtender" TargetControlID="btnPopClose" ID="btnPopClose_RoundedCornersExtender"></cc1:RoundedCornersExtender>
                </td>
            </tr>
        </table>                  
    </div>

Open in new window

Lead Software Engineer
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
that did it. Thanks for the help

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.