Html CSS-尝试将样式应用于模式弹出窗口中的类中的类_Html_Css_Asp.net_Class

Html CSS-尝试将样式应用于模式弹出窗口中的类中的类

html css asp.net class

Html CSS-尝试将样式应用于模式弹出窗口中的类中的类,html,css,asp.net,class,Html,Css,Asp.net,Class,编辑：我仍然没有找到解决办法，但是我设法完全避免了这个问题。如果有人知道为什么这不起作用，这将是难以置信的帮助，所以我知道未来。多谢各位 - 我似乎无法让它发挥作用，我试着到处寻找答案这是它的要点（全部嵌套在modalPopup面板中） <div class="body"> <div> <div class="left"> <asp:Label runat="server" Text="Na

编辑：我仍然没有找到解决办法，但是我设法完全避免了这个问题。如果有人知道为什么这不起作用，这将是难以置信的帮助，所以我知道未来。多谢各位

我似乎无法让它发挥作用，我试着到处寻找答案

这是它的要点（全部嵌套在modalPopup面板中）

<div class="body">                
<div>
     <div class="left">
         <asp:Label runat="server" Text="Name:" />
    </div>
     <div class="right">
         <asp:TextBox runat="server" ID="txtName" Text="" />
     </div>
</div>

正确的班级也是如此

我错过了一些非常明显的东西吗

如果需要的话，我可以给你更多的代码/信息，请随时询问

先谢谢你

编辑：

这是所有的代码

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="smsBatchUI.Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>


<!DOCTYPE html>
<link href="modalpopup.css" rel="stylesheet" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:Button ID="Button2" Text="Pop Up" runat="server" style="display:none" />
            <ajaxToolKit:ModalPopupExtender TargetControlID="Button2" ID="mp1" runat="server" PopupControlID="Panel1"
                    CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground">
            </ajaxToolKit:ModalPopupExtender>
            <asp:Panel ID="Panel1" runat="server" style="display:normal" align="center" CssClass="modalPopup">
                <div class="header">
                    <header>
                        Batch SMS Messaging
                    </header>
                </div>
                <div class="body">
                    <asp:CheckBox ID="chkVerify" runat="server" style="display:none" Checked="false" AutoPostBack="true" /><br />

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Name:" />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtName" Text="" />
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Number:" />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtNo" />
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Message:  " />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtMessage" />
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Template: " />
                        </div>
                        <div class="right">
                            <asp:DropDownList runat="server" Width="200px" ID="ddlTemplate">
                                <asp:ListItem Text="Select Template" Value="DefaultValue"></asp:ListItem>
                                <asp:ListItem Text="HR" Value="HR"></asp:ListItem>
                                <asp:ListItem Text="CT" Value="CT"></asp:ListItem>
                                <asp:ListItem Text="IT" Value="IT"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Send Date: " />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtDate" Text="YYYY-MM-DD" /><asp:Label runat="server" Text="(YYYY-MM-DD)" Font-Size="10px" />
                        </div>
                    </div>


                    <asp:Label runat="server" Text="Preview" style="padding-top: 0px" /> 
                    <br />
                    <asp:TextBox runat="server"  Height="150px" Width="300px" ID="txtPreview" Text="Click Preview to see your message before you Submit it." TextMode="MultiLine" /> <br />
                </div>
                <div class="footer">
                    <asp:Button runat="server" Text="Preview" ID="btnPreview" OnClientClick="Preview();" />
                    <asp:Button runat="server" Text="Submit" ID="btnSubmit" OnClick="btnSubmit_Click" OnClientClick="Validate()" /> <br />
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                    <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="btnUpload_Click" /> <br /> <br />
                    <asp:Button ID="ButtonCancel" runat="server" Text="Close" />
                </div>
            </asp:Panel>
        </div>
    </form>
</body>
</html>

我希望这能有所帮助

*{
保证金：0；
填充：0；
}
p{color:#fff；}
html，正文{
宽度：100%；
身高：100%；
}
莫达尔波普先生{
职位：相关；
宽度：100%；
身高：100%；
背景色：#fd3；
}
.modalPopup.body{
位置：绝对位置；
宽度：90%；
身高：90%；
背景色：#f00；
左：5%；
最高：5%；
}
.modalPopup.body.左{
宽度：50%；
身高：100%；
背景色：#0f0；
浮动：左；
}
莫达尔波普，尸体，对吗{
宽度：50%；
身高：100%；
背景色：#00f；
浮动：左；}


左
对

modalpoup类在哪里？模态弹出窗口与.modalpoup.body{}css一样工作正常。如果您需要，我可以将整个代码链接到您，我只是想我只发布我认为更相关的内容？您是否尝试过

.modalpoup>.body>左{}

如果这不起作用。发布代码。\r更新，希望有帮助：）.modalBackground{…}这是否有效？对于css最佳实践，不要对id和类使用大写字符。例如，对于类名，您可以使用“模态弹出”而不是“模态弹出”。不要将类或id命名为与html标记名相同的名称，这可能会有点混淆，因为某些原因代码片段可以工作，但一旦我将其放入代码中，它就不工作了是的，它在我的应用程序中不工作，因为某些原因抱歉。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="smsBatchUI.Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>


<!DOCTYPE html>
<link href="modalpopup.css" rel="stylesheet" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:Button ID="Button2" Text="Pop Up" runat="server" style="display:none" />
            <ajaxToolKit:ModalPopupExtender TargetControlID="Button2" ID="mp1" runat="server" PopupControlID="Panel1"
                    CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground">
            </ajaxToolKit:ModalPopupExtender>
            <asp:Panel ID="Panel1" runat="server" style="display:normal" align="center" CssClass="modalPopup">
                <div class="header">
                    <header>
                        Batch SMS Messaging
                    </header>
                </div>
                <div class="body">
                    <asp:CheckBox ID="chkVerify" runat="server" style="display:none" Checked="false" AutoPostBack="true" /><br />

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Name:" />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtName" Text="" />
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Number:" />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtNo" />
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Message:  " />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtMessage" />
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Template: " />
                        </div>
                        <div class="right">
                            <asp:DropDownList runat="server" Width="200px" ID="ddlTemplate">
                                <asp:ListItem Text="Select Template" Value="DefaultValue"></asp:ListItem>
                                <asp:ListItem Text="HR" Value="HR"></asp:ListItem>
                                <asp:ListItem Text="CT" Value="CT"></asp:ListItem>
                                <asp:ListItem Text="IT" Value="IT"></asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>

                    <div>
                        <div class="left">
                            <asp:Label runat="server" Text="Send Date: " />
                        </div>
                        <div class="right">
                            <asp:TextBox runat="server" ID="txtDate" Text="YYYY-MM-DD" /><asp:Label runat="server" Text="(YYYY-MM-DD)" Font-Size="10px" />
                        </div>
                    </div>


                    <asp:Label runat="server" Text="Preview" style="padding-top: 0px" /> 
                    <br />
                    <asp:TextBox runat="server"  Height="150px" Width="300px" ID="txtPreview" Text="Click Preview to see your message before you Submit it." TextMode="MultiLine" /> <br />
                </div>
                <div class="footer">
                    <asp:Button runat="server" Text="Preview" ID="btnPreview" OnClientClick="Preview();" />
                    <asp:Button runat="server" Text="Submit" ID="btnSubmit" OnClick="btnSubmit_Click" OnClientClick="Validate()" /> <br />
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                    <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="btnUpload_Click" /> <br /> <br />
                    <asp:Button ID="ButtonCancel" runat="server" Text="Close" />
                </div>
            </asp:Panel>
        </div>
    </form>
</body>
</html>

body { color: #373d3f; }
.modalBackground
    {
        background-color: floralwhite;
        filter: alpha(opacity=60);
        opacity: 0.6;
    }
.modalPopup
    {
        background-color: #E8ECED;
        width: 400px;
        border:1px solid #666666;
        border-radius: 12px;
        padding:0
    }
.modalPopup .header
    {
        background-color: #014B96;
        height: 30px;
        color: White;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        font-family: Helvetica, Arial;
    }
.modalPopup .body
    {
        min-height: 50px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        padding-left: 10px;
        padding-right: 10px;
        font-family: Helvetica, Arial;
        display: inline-block;
    }
.modalPopup > .body > .left
    {
        width: 30%;
        float: left;
        text-align: right;
    }
.modalPopup > .body >.right
    {
        width: 65%;
        margin-left: 10px;
        float:left;
    }
.modalPopup .buttonalignleft
    {
        text-align: left;
    }
.modalPopup .footer
    {
        padding: 6px;
    }