Thursday 1 April 2021

MVC5 - Add modal (popup dialog)

 Watch this example on YouTube

 1. View

@{
    ViewBag.Title = "Home Page";
}
<div class="AddPopUp">
    @Html.Label("Add pop up")
</div>
<div class="modal fade" id="MyPopUp" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                here are going your controls etc
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $(".AddPopUp").click(function (e) {
                $('#MyPopUp').modal('show');
            });
        });
    </script>
    }


2. CSS

.modal-content{
    height: 500px;
    width: 700px;
}

No comments:

Post a Comment