Question

我创建了一个示例项目，每当我点击一个按钮链接时，它应该调用一个包含我的模态弹出窗口的视图。我能够调用View但其中的模态不会出现。我该怎么办才能解决这个问题？请有人帮帮我吗？

这是我的代码。该链接应调用＆＃34; Create_Business_Info＆＃34;包含模态

@{
    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();

Answer 3

需要注意的要点是

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

不

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

此处查看 Bootstrap Document

同样将脚本放在具有模态的视图中，因此在使用模态加载此视图时，将显示模态。

下面是一个工作示例

＆＃13;

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

＆＃13;

<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-->

＆＃13;

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

3 个答案: