Geek Answers Handbook

Bootstrap modal in MVC, dual background - background appearing twice

I noticed that the problem occurs when creating bootable modal code using jQuery. Adding additional javascript in a dynamically generated partial representation (my modal) causes a double background to appear. Does anyone know why this is happening? I am using jquery-1.8.2.js and Bootstrap v3.1.1. Many thanks.

App.js

$(document).ready(function () {

$('.modal-button').on('click', function (e) {
    // Remove existing modals.
    $('.modal').remove();
    $.ajax({
        url: '/Ajax/GetSearchModal/',
        type: "get",
        cache: false,
        success: function (data) {
            var modal = $(data);
            $(data).modal({
                backdrop: 'static',
                keyboard: false,
            });
        }
    });
});

});

Partial view (my modal)

@model MVCApp.Web.Models.ModalSearchModel
<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>
                    Select Something
                </h3>
            </div>
            @using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post))
            { 
            <div class="modal-body">
                @Html.HiddenFor(m => m.SelectedDropDownID, new { @class     = "select-something-ddl", style = "width:100%", placeholder = "Search..." })
            </div>
            <div class="modal-footer">
                <button type="submit" value="Continue">Continue</button>
                <button type="button" value="Cancel" data-dismiss="modal">Cancel</button>
            </div>
            }
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        // This here causes the drop backdrop

        // select2 code here
    });
</script>

UPDATE

Moving javascript from modal to success handler did not help achieve what I'm trying to achieve. I want to run select2 dropdown. The only way to make it work in the success handler is this:

            modal.on('shown.bs.modal', function () {
                $('#SelectedDropDownID').select2({
                    ajax: {
                        url: '/Ajax/FetchResults/',
                        dataType: 'json',
                        delay: 250,
                        data: function (searchTerm) {
                            return { query: searchTerm };
                        },
                        results: function (data) {
                            return { results: data };
                        }
                    },
                    minimumInputLength: 2,
                    formatResult: formatRepo,
                    formatSelection: formatRepoSelection
                });

            });

select2 , , . , select2 .

, cvrebert. Bootstrap jQuery, . , , select2 fixed select2, . :

function formatRepo(item) {
    var markup = "<table class='item-result'><tr>";
    if (item.text !== undefined) {
        markup += "<div class='item-name' data-jtext=" + item.text + " data-jid=" + item.id + ">" + item.text + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

function formatRepoSelection(item) {
    return item.text;
}


$('.modal-button).on('click', function (e) {
    // Delete existing modals.
    $('.modal').replaceWith('');
    // Get modal.
    $.ajax({
        url: '/Ajax/GetSearchModal/',
        type: "get",
        cache: false,
        success: function (data) {
            var modal = $(data);
            $('body').append(modal);
            $('#SelectedDropDownID').select2({
                ajax: {
                    url: '/Ajax/FetchResults/',
                    dataType: 'json',
                    delay: 250,
                    data: function (searchTerm) {
                        return { query: searchTerm };
                    },
                    results: function (data) {
                        return { results: data };
                    }
                },
                minimumInputLength: 2,
                formatResult: formatRepo,
                formatSelection: formatRepoSelection
            });

            modal.modal({
                backdrop: 'static',
                keyboard: false,
            });
        }
    });
});
+4
4

fade class

 $(document).on("DOMNodeRemoved",".modal-backdrop",function(){
    $(".modal-backdrop").remove();
 });

, , - , fade.

0

, <div>, id, javascript , Partial View.

Partial View, Modal, :

    @model MVCApp.Web.Models.ModalSearchModel
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>
                    Select Something
                </h3>
            </div>
            @using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post))
            { 
            <div class="modal-body">
                @Html.HiddenFor(m => m.SelectedDropDownID, new { @class     = "select-something-ddl", style = "width:100%", placeholder = "Search..." })
            </div>
            <div class="modal-footer">
                <button type="submit" value="Continue">Continue</button>
                <button type="button" value="Cancel" data-dismiss="modal">Cancel</button>
            </div>
            }
        </div>
    </div>

div :

<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog">
0

, .

:

1. , .
2.

data-dismiss="modal" .

0

This is an old post that I came across since this question is still in Bootstrap and I am helping people who come for me.

The problem is that a single Div with a modal background class still remains after the modal closes.

1) Add the btn-close class to both close buttons: -

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button"  class="close btn-close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button"  class="btn btn-danger btn-close" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
</div>

2) Add this jquery at the bottom of the page:

$(document).ready(function(){
        $('.btn-close').click(function(){
             $(".modal-backdrop").remove();
        });
 });
0
source

More articles:


All Articles