locked
Bootstrap Modal is not working Properly RRS feed

  • Question

  • User1912965948 posted

    Hi all,

    I'm facing problem with Bootstrap modal. 

    Popup not come just screen got fade.

    Everything is OK when I use jQuery Dialog but its not working when I use bootstrap modal instead of jquery Dialog.

    Here is my code.

    chtml

    @using (Html.BeginForm("AddEdit", "Customer", FormMethod.Post))
    {
       
        @Html.HiddenFor(model => model.cusId)
    
        <div class="form-group">
            @Html.LabelFor(model => model.name, new { @class = "control-label" })
            @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.name)
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.contact, new { @class = "control-label" })
            @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.contact)
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.email, new { @class = "control-label" })
            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
            @Html.ValidationMessageFor(model => model.email)
        </div>
    
        <div class="form-group">
            <input type="submit" value="Submit" class="btn btn-primary" />
            <input type="reset" value="Reset" class="btn btn-warning" />
        </div>
                        
    }

    Button

    <a class="btn btn-default btn-primary btn-sm" onclick="PopupForm('@Url.Action("AddEdit", "Customer")')"> Add New Customer</a>

    Working code jQuery Dialog

    function PopupForm(url) {
                var formDiv = jQuery('<div/>');
                jQuery.get(url)
                    .done(function (response) {
                        debugger;
                        formDiv.html(response);
                        popUp = formDiv.dialog({
                            
                        });
                    });
            }

    Not working with bootstrap Modal

    function PopupForm(url) {
                var formDiv = jQuery('<div/>');
                jQuery.get(url)
                    .done(function (response) {
                        debugger;
                        formDiv.html(response);
                        popUp = formDiv.modal({
                            
                        });
                    });
            }

    Files Sequence

    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Content/vendor/datatables/jquery.dataTables.min.js"></script>
        <script src="~/Content/vendor/datatables/dataTables.bootstrap4.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script src="~/Scripts/notify.min.js"></script>


     Screen fade when I use bootstrap popup not come up.

    Thanks in advance

    Thursday, December 26, 2019 7:20 AM

Answers

  • User1535942433 posted

    Hi fungus.00,

    Accroding to your codes,I suggest you could  add the name of class to div.It is necessary to modal popup.

    More details,you could refer to below codes:

    Index.cshtml:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
     
     <script>
            function PopupForm(url) {
                var formDiv = jQuery('<div/>');
                formDiv.addClass("modal fade");
                jQuery.get(url)
                    .done(function (response) {
                        debugger;
                        formDiv.html(response);
                        popUp = formDiv.modal('show');
                    });
            }
        </script>
    
    <div class="container">
            @using (Html.BeginForm("Index", "BootstrapModal", FormMethod.Post))
            {
                @Html.HiddenFor(model => model.cusId)
                <div class="form_group">
                    @Html.LabelFor(model => model.name, new { @class = "control-label" })
                    @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" } })
                    @Html.ValidationMessageFor(model => model.name)
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.contact, new { @class = "control-label" })
                    @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
                    @Html.ValidationMessageFor(model => model.contact)
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.email, new { @class = "control-label" })
                    @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
                    @Html.ValidationMessageFor(model => model.email)
                </div>
    
                <div class="form-group">
                    <input type="submit" value="Submit" class="btn btn-primary" />
                    <input type="reset" value="Reset" class="btn btn-warning" />
                </div>
                <a class="btn btn-default btn-primary btn-sm"  onclick="PopupForm('@Url.Action("Add", "BootstrapModal")')"> Add New Customer</a>
            }
        </div>

    Add.cshtml:

    @using (Html.BeginForm("Add", "BootstrapModal", FormMethod.Post))
        {
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        @Html.HiddenFor(model => model.cusId)
                        <div class="form_group">
                            @Html.LabelFor(model => model.name, new { @class = "control-label" })
                            @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" } })
                            @Html.ValidationMessageFor(model => model.name)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.contact, new { @class = "control-label" })
                            @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
                            @Html.ValidationMessageFor(model => model.contact)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.email, new { @class = "control-label" })
                            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
                            @Html.ValidationMessageFor(model => model.email)
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        }

    Controller:

    public ActionResult Index()
            {
                BootstrapModal modal = new BootstrapModal()
                {
                    cusId = 1,
                    name = "AAA",
                    contact = "BBB",
                    email = "AAA@CCCC"
                };
                return View(modal);
            }
            public ActionResult Add()
            {
                return View();
            }

    Model:

     public class BootstrapModal
        {
            public int cusId { get; set; }
            public string name { get; set; }
            public string contact { get; set; }
            public string email { get; set; }
        }

    Bootstrap modal:
    https://getbootstrap.com/docs/4.0/components/modal/

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 27, 2019 9:43 AM

All replies

  • User1535942433 posted

    Hi fungus.00,

    Accroding to your codes,I suggest you could  add the name of class to div.It is necessary to modal popup.

    More details,you could refer to below codes:

    Index.cshtml:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
     
     <script>
            function PopupForm(url) {
                var formDiv = jQuery('<div/>');
                formDiv.addClass("modal fade");
                jQuery.get(url)
                    .done(function (response) {
                        debugger;
                        formDiv.html(response);
                        popUp = formDiv.modal('show');
                    });
            }
        </script>
    
    <div class="container">
            @using (Html.BeginForm("Index", "BootstrapModal", FormMethod.Post))
            {
                @Html.HiddenFor(model => model.cusId)
                <div class="form_group">
                    @Html.LabelFor(model => model.name, new { @class = "control-label" })
                    @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" } })
                    @Html.ValidationMessageFor(model => model.name)
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.contact, new { @class = "control-label" })
                    @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
                    @Html.ValidationMessageFor(model => model.contact)
                </div>
    
                <div class="form-group">
                    @Html.LabelFor(model => model.email, new { @class = "control-label" })
                    @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
                    @Html.ValidationMessageFor(model => model.email)
                </div>
    
                <div class="form-group">
                    <input type="submit" value="Submit" class="btn btn-primary" />
                    <input type="reset" value="Reset" class="btn btn-warning" />
                </div>
                <a class="btn btn-default btn-primary btn-sm"  onclick="PopupForm('@Url.Action("Add", "BootstrapModal")')"> Add New Customer</a>
            }
        </div>

    Add.cshtml:

    @using (Html.BeginForm("Add", "BootstrapModal", FormMethod.Post))
        {
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        @Html.HiddenFor(model => model.cusId)
                        <div class="form_group">
                            @Html.LabelFor(model => model.name, new { @class = "control-label" })
                            @Html.EditorFor(model => model.name, new { htmlAttributes = new { @calss = "form-control" } })
                            @Html.ValidationMessageFor(model => model.name)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.contact, new { @class = "control-label" })
                            @Html.EditorFor(model => model.contact, new { htmlAttributes = new { @calss = "form-control" } })
                            @Html.ValidationMessageFor(model => model.contact)
                        </div>
                        <div class="form-group">
                            @Html.LabelFor(model => model.email, new { @class = "control-label" })
                            @Html.EditorFor(model => model.email, new { htmlAttributes = new { @calss = "form-control" } })
                            @Html.ValidationMessageFor(model => model.email)
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        }

    Controller:

    public ActionResult Index()
            {
                BootstrapModal modal = new BootstrapModal()
                {
                    cusId = 1,
                    name = "AAA",
                    contact = "BBB",
                    email = "AAA@CCCC"
                };
                return View(modal);
            }
            public ActionResult Add()
            {
                return View();
            }

    Model:

     public class BootstrapModal
        {
            public int cusId { get; set; }
            public string name { get; set; }
            public string contact { get; set; }
            public string email { get; set; }
        }

    Bootstrap modal:
    https://getbootstrap.com/docs/4.0/components/modal/

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, December 27, 2019 9:43 AM
  • User1912965948 posted

    At last someone has replied that after more than 24 hours..

    I just add the class and now its fine. :)

    Thank you very much Yijing Sun.

    Friday, December 27, 2019 11:10 AM