如何在 ASP.Net MVC 中调用 Bootstrap 模式？

Question

我创建了一个示例项目，每当我单击一个按钮时 link，它应该调用一个包含我的模态弹出窗口的视图。我能够调用视图，但其中的模态没有出现。我能做些什么来修复它？有人可以帮我吗？

这是我的代码。 link 应该调用包含模态

的 "Create_Business_Info"

@{
    ViewBag.Title = "Business_Info";
}

<div class="container-fluid">

    <a href='@Url.Action("Create_Business_Info", "Maintenance")'>
    Business INFO!
    </a>

    </div>

<script>
    $(document).ready(function () {
        $("#myModal").show();

    });

</script>

这是应该出现的模态框的代码。

<div id="myModal" class="modal fade" data-backdrop="static" data-     keyboard="false">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header modal-header-employee">

            <button type="button" class="close" data-dismiss="modal">&times;    </button>
            <h3 class="modal-title">Business Information</h3>
        </div>
        <br />

        <div class="modal-body">

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Business Name:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <textarea class="form-control" rows="5"></textarea>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Contact No:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Website:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Email Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>
        </div><!--modal body-->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-default">Clear</button>

            </div><!--modal footer-->
        </div><!--modal content-->
    </div><!--modal dialog-->
</div><!--business_info-->



<script>
    $(document).ready(function () {
        $("#myModal").show();

    });



</script>

请有人帮助我。非常感谢。

Answer 1

将您的脚本修改为 ,

<script type="text/javascript">
    $(window).load(function(){
        $('#myModal').modal('show'); 
    });
</script>

应该是selector.modal('show')而不是selector.show() 来源：Launch Bootstrap Modal on page load

Answer 2

要注意的重点是应该是

$('#myModal').modal('show')

不是

$('#myModal').show();

这里勾选Bootstrap Document

另外将脚本放在具有模态的视图中，因此在加载具有模态的视图时显示模态。

下面还有一个工作示例

 $(document).ready(function () {
        $("#myModal").modal('show');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myModal" class="modal fade" data-backdrop="static" data-     keyboard="false">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header modal-header-employee">

            <button type="button" class="close" data-dismiss="modal">&times;    </button>
            <h3 class="modal-title">Business Information</h3>
        </div>
        <br />

        <div class="modal-body">

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Business Name:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <textarea class="form-control" rows="5"></textarea>
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Contact No:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Website:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-xs-4 col-sm-offset-1 col-sm-4 control-label">Email Address:</label>
                <div class="col-xs-8 col-sm-6">
                    <input class="form-control" type="text">
                </div>
            </div>
        </div><!--modal body-->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-default">Clear</button>

            </div><!--modal footer-->
        </div><!--modal content-->
    </div><!--modal dialog-->
</div><!--business_info-->

Answer 3

试试这个：

$('#myModal').modal();

如何在 ASP.Net MVC 中调用 Bootstrap 模式？

How to call a Bootstrap Modal in ASP.Net MVC?

asp.net-mvc

jquery

asp.net-mvc-3

twitter-bootstrap

bootstrap-modal