Question

我正在为一个网站开发一个bootstrap登录模式。在主页上，模态的高度是正常的，如下图所示。

然而，当我在网站上找到其他页面并触发顶部链接的模态时，窗口会被拉伸到随机大小，我无法弄清楚它从何处获取。

以下是模态的代码

<!-- begin login modal -->
<div id="login_modal" class="modal hide-on-small" style="width: 500px !important; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;" data-swiftype-index='false'>
    <div class="account-login clearer">
        <div class="page-title">
            <h1>Login or Create an Account</h1>
        </div>

    <form action="/customer/account/loginPost/" method="post" id="login-form">
        <div class="new-users grid12-6">
            <div class="content">
                <h2>New Customers</h2>
                <p>By creating an account, you'll be able to move through the checkout process faster, store multiple shipping address, view your order, track and redeem your reward points!</p>
            </div>
            <div class="buttons-set">
                <button type="button" title="Create an Account" class="button" onclick="window.location='/customer/account/create/';"><span><span>Create an Account</span></span></button>
            </div>
            <p>Log in with your Facebook account!</p>
            <a href="#" onclick="return fblogin();" class="fb_button_ps"><img src="http://www.empowered.org/public/images/fb_login.png"></a>
        </div>

        <div class="registered-users grid12-6">
            <div class="content">
                <h2>Registered Customers</h2>

                <p>If you have an account with us, please log in. <br><a href="/customer/account/forgotpassword/">Forgot Your Password?</a></p>

                <ul class="form-list">
                    <li>
                        <label for="email" class="required"><em>*</em>Email Address</label>
                        <div class="input-box">
                            <input type="text" name="login[username]" value="" id="email" class="input-text required-entry validate-email" title="Email Address" style="width:200px;">
                        </div>
                    </li>
                    <li>
                        <label for="pass" class="required"><em>*</em>Password</label>
                        <div class="input-box">
                            <input type="password" name="login[password]" class="input-text required-entry validate-password" id="pass" title="Password" style="width:200px;">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="buttons-set">
                <button type="submit" class="button" title="Login" name="send" id="send2"><span><span>Login</span></span></button>
            </div>
        </div>

    </form>
</div>
</div>
<!-- end login modal -->

这是相应的CSS

#signup_modal p {
margin-top: 5px;
margin-bottom: 5px;
}
#signup_modal .signup_secondary {
margin-top: 10px;
margin-bottom: 0;
}
#signup_modal h2 {
color: #f05002;
margin: 0;
font-weight: 600;
}
.modal_sub:hover {
background-color: #f6f9f2;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
border-color: transparent;
cursor: hand;
cursor: pointer;
}
.modal_sub_price {
margin-left: 16px;
}
.modal_sub img {
margin-bottom: 13px;
}
.modal_sub span {
margin-bottom: 0;
}
.modal_sub .bulu_btn_signup_mini {
margin-bottom: 13px;
}

.modal {
display: none;
width: 600px;
background: #fff;
padding: 15px 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(/assets/modal/close.png) no-repeat 0 0;
}
.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(/assets/modal/spinner.gif) #111 no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}

有没有办法明确设置模态的高度？在此先感谢您的帮助！

http://jsfiddle.net/44Yua/是一个小提琴。它缺少一点造型，但其余的都在那里。

Answer 1

原来它不是一个自举模式，但是通过对css height属性的一点修补我得到了它的工作。

另一页上也有一些冲突的css正在抛弃它。看你的样式表，伙计。

如何明确设置登录模式的高度？

1 个答案: