Modal does not load Style when started automatically

I have a modal that is opened when the application is started, I made the check if it is the first time the user logs on the system through a cookie. The problem is that when the modal is forced to execute, it does not load the style, it follows a print of how it opens when the application forces it to execute:

However,ifIgotoanotherviewandopenthemodal,callingbybutton,itnormallyopens,withthestyleloaded,followsprint:

Afterthis,ifIgobacktoviewHome(whereitisforcedtocallwhentheapplicationstarts)andclickthebuttontodisplaythemodal,itloadsthestylenormally.

Thesecondcaseis,WhenIstarttheapplication,itdisplaysthemodalwithoutthestyle,andifIstayonthepageandclickonthemodaldisplaybutton,itcontinuestodisplaywithoutstyle,itjustreturnstodisplaywithstyleIncaseIchangethepage.

NOTE:Itriedtodothisusingotherpagesbesidesthe"home" to receive the modal when the application starts, to see if the problem was in it, but in all of the same problem.

Here is the code that calls my modal when it is started:

    <div class="modal fade" id="OpenModal" role="dialog" style="text-align:center;vertical-align:middle">
        <div class="container" style="border:#000000">
            <div class="modal-dialog-sm" style="margin-left:240px">
                <div class="modal-content" style="height:110px;width:500px">
                    <div class="modal-body" id="ModalBody">


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


<script>
    // Obtém todos os cookies do documento
     $(document).ready(function () {

        var cookies = document.cookie;

        // Verifica se o cookie existe
        if (cookies.indexOf("Facility") == -1) {
            // Entra aqui caso o cookie não exista no  navegador do usuário
            //var diasparaexpirar = 2;
            //var expiracao = new Date();
            //expiracao.setTime(expiracao.getTime() + (diasparaexpirar * 60 * 60 * 1000));

            // Converte a data para string
            //expiracao = expiracao.toUTCString();

            // Crio o cookie com a data de expiração
            document.cookie = 'Facility=null; path = /'

            // Exibo o modal
                $('#ModalBody').html('<iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="/Facility/ActiveFacility"></iframe>');
                $("#OpenModal").modal("show");
            }
    });


</script>

It creates the Cookie to know if the application is being started and to display the modal, and render the modal, and the body it renders another page of my application, which is the modal page. I made this external mode because it will be used in different parts of the program. Mod code:

<script type="text/javascript" src="~/Scripts/View/ActiveFacility.js"></script>

<div class="form-horizontal">
    <fieldset>
        <div class="col-lg-12">
            <label>Teste</label>
        </div>

        @using (Ajax.BeginForm("", "", null, new { @class = "form-signin", id = "formActive", name = "formActive" }))
        {
            <div class="col-lg-12">
                @Html.DropDownList("Facilities", ViewBag.Facilities as SelectList, new { @class = "Form-control" })
            </div>


            <div class="col-lg-12">
                <button type="button" class="btn btn-success " style="margin-top: 10px;margin-bottom:5px;" onclick="Save();">Teste</button>
            </div>
        }
        </fieldset>

</div>

As I said before, I have a button that also opens the same modal, the button uses the same code as rendering modal when the application is started, the last two lines of the code:

// Exibo o modal
                    $('#ModalBody').html('<iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="/Facility/ActiveFacility"></iframe>');
                    $("#OpenModal").modal("show");