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

Question

I created a sample project that whenever i click a button link, it should call a View which contains my Modal Pop Up. I was able to call the View but the modal in it doesn't appear. What can i do to fix it? Can anybody help me please?

This is my code. The link should call the "Create_Business_Info" that contains the modal

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

This is the code of the Modal that should appear.

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

Someone help me please. Thank you so much.

Answer 1

Try this:

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

Answer 2

Main point to note is It should be

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

Not

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

Here Check the Bootstrap Document

Also place the script in the View which has the modal, So on load of this view with modal the modal is shown.

Also here is a working example below

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

Modify your script to ,

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

it should be selector.modal('show') instead of selector.show() Source:Launch Bootstrap Modal on page load