Question

编辑：我还没有找到解决方案，但我已设法完全避免这个问题。如果有人知道为什么这不起作用，那将是非常有用的，所以我知道未来。谢谢

-

我似乎无法让这个工作，我试着到处寻找答案。

这是它的要点（全部嵌套在modalPopup Panel中。

<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>

另外我应该补充一点，我可以在没有问题的情况下为body类添加样式。

我在CSS中试过这些：

.modalPopup .body.left {}

.modalPopup .body .left {}

.modalPopup .body > left {}

.modalPopUp .body > .left {}

对于正确的班级也一样。

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

如果需要，我可以给你更多的代码/信息随时随地提出。

提前谢谢。

编辑：

以下是所有代码

    <%@ 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>

CSS：

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;
    }

Answer 1

我希望能有所帮助。

＆＃13;

*{
margin:0;
padding: 0;

}

p{color:#fff;}
html,body{
width:100%;
height:100%;
}

.modalPopup{
position:relevant;
width:100%;
height:100%;
background-color:#fd3;
}

.modalPopup .body {
position:absolute;
width:90%;
height:90%;
background-color:#f00;
left:5%;
top:5%;
}

.modalPopup .body .left {
width:50%;
height:100%;
background-color:#0f0;
float:left;
}
.modalPopup .body .right {
width:50%;
height:100%;
background-color:#00f;
float:left;}

＆＃13;

<div class="modalPopup">
<div class="body">
<div class="left">
<p>Left</p>
</div>
<div class="right">
<p>Right</p>
</div>
</div>
</div>

＆＃13;

CSS - 尝试在样式弹出窗口

1 个答案: