modal-backdrop fade in issue with bootstrap modal

Question

I tried this solution: https://stackoverflow.com/questions/22056147/bootstrap-modal-backdrop-remaining but no solutions I am trying diplay bootstraps modal in my screen first time it comes perfectly second time it comes but with more darker background(error) with these two lines .

here is my js

$(".Ok").modal("show");
        $("#alert").on("hidden.bs.modal", function () {
                $(this).removeClass("Ok");

        });

note: "Ok" class i am bring dynamically from json data

and after click close button in second modal it display darker overlay background

it displays this in the html

here is my html

<div id="alert" class="modal fade {{popupBtn1Txt}}">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>{{popupErrMsg}}</p>
                    </div>
                    <div class="modal-footer text-center">
                        <button type="button" id="btnc" class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{popupBtn1Txt}}</button>
                    </div>
                </div>
            </div>
        </div>

{{popupBtn1Txt}} - > "Ok" comes dynamically using handlebarjs support with jSON

i don't want the black overlay background

Answer 1

I called id as dynamic data and removed the id once the popup usesage is over. again if there is need then it will add the id dynamically from the json response and using the trigger the overlay is removed and also the looping

    $("#Ok").modal("show");
        $('#Ok').on('hidden.bs.modal', function () {
             $('.bg_limegreen').trigger('click');
             $(".modal").attr("id","");
            });