Bootstrap模态显示灰色和进度

时间:2014-03-19 11:27:42

标签: twitter-bootstrap-3 asp.net-mvc-5 bootstrap-modal

我有一个Bootstrap Modal

<div id="responsive" class="modal" tabindex="-1" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Responsive</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-6">
                <h4>Some Input</h4>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
            </div>
            <div class="col-md-6">
                <h4>Some More Input</h4>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
                <p><input class="form-control" type="text"></p>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#responsive">
    New Cash Account
</button>

当我点击每件事情都像这样有趣,为什么?请帮助!!!!

这个应用程序我在MVC 5中并使用bootstrap脚手架

result screen when it shoudl display

当它显示

2 个答案:

答案 0 :(得分:3)

Bootstrap 3(标记你的问题),要求modal-content包裹在modal-dialog div ..

<div id="responsive" class="modal" tabindex="-1" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
               ...

演示:http://www.bootply.com/123094

进度条可能是您网页上其他冲突元素的一部分。

答案 1 :(得分:0)

希望以下链接有所帮助。

http://www.youtube.com/watch?v=nlEfHg9ua1w