Why is my Modal not showing in my View page of ASP.NET Core MVC?

Question

I want the modal to pop up after a user has successfully subscribed into the service. Everything else in the html page loads as required however the modal is not popping up.

The code is as follows:

<body>
<ul class="nav nav-tabs" style="background-color:blue; display:block; width:100%">
            <li style="float:left; line-height:40px; padding:5px 10px 5px 10px; display:none"><a href="/Home/Subscribe" style="color:white;">Edit Profile</a></li>
            @*<li style="float:right; padding: 5px 10px 5px 10px;"><a href="/Home/Edit" style="color:white;">Username: @ViewBag.username</a></li>*@
            <li style="float:right; padding: 5px 10px 5px 10px;"><a href="@Url.Action("Edit","Home",new { sub_id = Context.Session.GetInt32("SubscriberNumber") })" style="color:white;">Username: @ViewBag.username</a></li>
        </ul>
        <div><h1 style="text-align:center;">Welcome to Service</h1></div>

        <div class="modal" id="successModal" role="dialog">
            <div class="modal-dialog">
                <!--Modal content-->
                <div class="modal-content">
                    <div class="modal header">
                        <h4 class="modal-title">Welcome to Service</h4>
                    </div>
                    <div class="modal-body">
                        <p>Thank you for subscribing to Haz360</p>
                        <p>Username: @ViewBag.username</p>
                        <p>Password: @ViewBag.password</p>
                    </div>
                    <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                    
                </div>
            </div>
        </div>
</body>

How can I get my Modal to show upon visiting this page? Thank you in advance.

Answer 1

You can add a button and click the button to popping up the modal.

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#successModal">
    Click
</button>

If you don't want have a button,you can use jquery.

@section scripts{ 
<script>
    $(document).ready(function () {
        $('#successModal').modal('show');
    });
</script>
}

Test result:

Why is my Modal not showing in my View page of ASP.NET Core MVC?

Question

1 answers

solution1
1 ACCPTED 2021-01-05 03:28:36

Why is my Modal not showing in my View page of ASP.NET Core MVC?

Question

1 answers

solution1 1 ACCPTED 2021-01-05 03:28:36

solution1
1 ACCPTED 2021-01-05 03:28:36