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

nabilabo...

SOLVED CLOSED ACTIVE ANSWERED
User: nabilabolo
Posted: on Oct 19, 2020 02:28 AM
Forum: ASP.Net MVC
Answer: 1
Views: 23531

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();
    })
});

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 7

Reply
ANSWER
User: dharmendr
Replied: on Oct 21, 2020 05:47 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us