Question

模态位于网页顶部，我无法编辑模态的width

CSS

.modal-dialog {
    width:1000px;
}

头标记代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

html body标签中的模态代码。我的代码有什么问题吗？

<div class="modal fade" id="account" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <center><h4 class="modal-title" id="myModalLabel">My Account</h4></center>
            </div>
            <div class="modal-body">
            <div class="container-fluid">
            <form method="POST" action="update_account.php">
                <div style="height: 10px;"></div>
                <div class="form-group input-group">
                    <span class="input-group-addon" style="width:150px;">Name:</span>
                    <input type="text" style="width:350px;" class="form-control" name="mname" value="<?php echo $srow['uname']; ?>">
                </div>
                <div class="form-group input-group">
                    <span class="input-group-addon" style="width:150px;">Username:</span>
                    <input type="text" style="width:350px;" class="form-control" name="musername" value="<?php echo $srow['username']; ?>">
                </div>
                <div class="form-group input-group">
                    <span class="input-group-addon" style="width:150px;">Password:</span>
                    <input type="password" style="width:350px;" class="form-control" name="mpassword" value="<?php echo $srow['password']; ?>">
                </div>
                <hr>
                <span>Enter current password to save changes:</span>
                <div style="height: 10px;"></div>
                <div class="form-group input-group">
                    <span class="input-group-addon" style="width:150px;">Password:</span>
                    <input type="password" style="width:350px;" class="form-control" name="cpassword">
                </div>
                <div class="form-group input-group">
                    <span class="input-group-addon" style="width:150px;">Confirm Password:</span>
                    <input type="password" style="width:350px;" class="form-control" name="apassword">
                </div>
            </div> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
                <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> Update</button>
            </form>
            </div>
        </div>
    </div>
</div>

我该如何解决？

Answer 1

这些jquery插件中的大多数都有他们使用的默认CSS，这可能会覆盖你自己的CSS。您可以尝试添加!important ...

.modal-dialog {
   width:1000px !important;
}

请注意，使用!important通常不是一个好主意，但至少应该确认这是问题所在。

设置此插件宽度的正确方法可能是在调用模式时将其作为参数发送。请参阅width参数的API文档：

http://api.jqueryui.com/dialog/

Answer 2

如果您使用Bootstrap for CSS，您可以使用modal-lg和modal-sm类来更改模态的宽度，例如：

<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        ...
    </div>
</div>

此外，您可以使用!important强制重新启动模式，就像所说的@geoidesic一样。

.modal-dialog {
    width:1000px !important;
}

有关Bootstrap Modal

的更多信息

顶部的模态，我无法改变宽度

2 个答案: