模态弹出覆盖整页

时间:2017-06-11 07:23:07

标签: twitter-bootstrap

我是BootStrap的初学者。我在模态弹出窗口遇到问题。当我打开模态弹出窗口时,模态弹出窗口覆盖整个屏幕。我研究了它并找到了一个解决方案,将位置从固定更改为绝对,但它对我不起作用。

enter image description here

以下是我使用过的代码片段:

 <div class="container">
        <div class="row">
            <div id="myModal" style="background-color:white;" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                        <h4 class="modal-title">
                            Sign In to ITRGuide</h4>
                    </div>
                    <div class="modal-body">
                        <form method="post">
                        <div>
                            <asp:Label runat="server" ForeColor="Red" ID="lblErrorMessage"></asp:Label></div>
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-user"></span></span>
                            <%--     <input name="txtEmail" type="text" runat="server" id="txtemail" class="form-control"
                                    onkeypress=" return onlyNumbersandSpecialChar()" placeholder="Email">--%>
                            <asp:TextBox runat="server" ID="txtEmail" class="form-control" onkeypress=" return onlyNumbersandSpecialChar()"
                                placeholder="Email"></asp:TextBox>
                        </div>
                        <div>
                            <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*Email is required"
                                ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-lock"></span></span>
                            <%--  <input name="txtPassword" runat="server" type="password" id="txtpassword" class="form-control"
                                    placeholder="Password">--%>
                            <asp:TextBox runat="server" TextMode="Password" ID="txtPwd" class="form-control"
                                placeholder="Password"></asp:TextBox>
                        </div>
                        <div>
                            <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ErrorMessage="*Password is required"
                                ControlToValidate="txtPwd"></asp:RequiredFieldValidator>
                        </div>
                        <div style="margin-bottom: 22px; width: 200px;">
                            <cc2:CaptchaControl ID="cptCaptcha" runat="server" CaptchaBackgroundNoise="Low" CaptchaLength="5"
                                CaptchaHeight="60" CaptchaWidth="200" CaptchaLineNoise="None" CaptchaMinTimeout="5"
                                CaptchaMaxTimeout="240" FontColor="#529E00" />
                        </div>
                        <div>
                            <asp:TextBox ID="txtCaptcha" runat="server" class="form-control"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvCaptcha" runat="server" ErrorMessage="*Captcha is required"
                                ControlToValidate="txtCaptcha"></asp:RequiredFieldValidator>
                        </div>
                        <div class="form-group">
                            <asp:Button ID="btnSignIn" class="btn-button btn-signin" Text="Sign In" runat="server" />
                        </div>
                        <div class="fmyp text-center">
                            <a href="ForgotPassword.aspx" style="color: #4d8ff9;">Forgot password?</a>
                        </div>
                        <div class="canacc text-center">
                            New to ITRGuide? <a href="UserRegister.aspx" style="color: #4d8ff9;">Sign Up</a>
                        </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

0 个答案:

没有答案