[Solved] Bootstrap Modal backdrop does not disappear after modal close in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

Hi, 

I want to display modal popup in the system. When i tried the modal in jsfiddle it worked, but when in my system, the modal become invisible but when i check inspect element the modal is exist. The class of modal that i use is modal fade, but when i change to modal it work just the background is dark not fade. 

I change from 4.3.1 to 4.4.0

How to solve this issue? 

<a href="" class="btn btn-info" data-toggle="modal" data-target="#myModal2">Update</a>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            @using (Html.BeginForm("UpdateApt", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
            {
                <div class="modal-header">
                    <h5 class="modal-title custom_align">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="hidden" id="hfMaterialId" name="Id" value="" />
                        <span>Selection: </span>
                        <input class="form-control " id="Requester_id" name="Requester_id" type="text" value="">
                    </div>
                    <div class="form-group">
                        <span>System :</span>
                        <input class="form-control " id="admComment" name="admComment" type="text" value="">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            }
        </div>
    </div>
</div>

 

$(function () {
    $('#myModal2').on('show.bs.modal', function (e) {
        $('#myModal2').focus();
    })
});

 

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi nabilabolo,

I have checked the code with the version you mentioned.

Its working perfectly.

There might be other css and js that causing the issue. So comment one by one and check.

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $('#myModal2').on('show.bs.modal', function (e) {
                $('#myModal2').focus();
            })            
        });        
    </script>
</head>
<body>
    <div class="container">
        <a href="" class="btn btn-info" data-toggle="modal" data-target="#myModal2">Update</a>
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
             data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
                    {
                        <div class="modal-header">
                            <h5 class="modal-title custom_align">New message</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <input type="hidden" id="hfMaterialId" name="Id" value="" />
                                <span>Selection: </span>
                                <input class="form-control " id="Requester_id" name="Requester_id" type="text" value="">
                            </div>

                            <div class="form-group">
                                <span>System :</span>
                                <input class="form-control " id="admComment" name="admComment" type="text" value="">
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-success">Save</button>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot