Modal does not load Style when initialized automatically

Asked

Viewed 70 times

2

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

inserir a descrição da imagem aqui

However, if I go to another view and open the modal, calling by button, it opens normally, with the style loaded, follows print:

inserir a descrição da imagem aqui

After that, if I go back to view Home(where it is called forced when the application starts) and click the button to display the modal, it loads the style normally.

The second case is, When I start the application, it displays the modal without the style, and if I remain on the page and click the button to display the modal, it continues displaying without style, it only returns to display with style in case I change page.

NOTE: I tried to do this using other pages besides "home" to receive the modal when starting the application, to see if the problem was in it, but in all of the same problem.

Follow the code that calls my modal when it starts:

    <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>

He creates the Cookie to know if the application is being started and display the modal, and renders the modal, and the body he renders another page of my application, which is the modal page. I made this external modal because it will be used in various parts of the program. Modal 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 also that opens this same modal, the button uses the same code as the one that renders the modal when the application is started, being 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");
  • 1

    I notice that the content of the modal comes from an iframe. After opening a style flawed modal, when inspecting the console tab(F12) you see any described error ? Especially some error related to not loading some css file...

  • No, it shows no error, but where it shows the style rules, in inspecting element, it shows empty, as if it had no rule. When I open the modal per button, the only thing that appears on the console is this: Xmlhttprequest synchronous should not be used on the main thread due to its detrimental effects to the user experience. For more information http://xhr.spec.whatwg.org/

  • 1

    Are you referencing the css files within this iframe? Because the css reference of the page that calls iframe does not affect (or should not affect) the content of iframe.

  • So the css is coming from a Bundle that is being called in Shared, so the css is being applied to all views, so much so that in the view where the button that loads the style is not with the declared css tbm, he takes from Shared, this iframe is pulling from a folder where it has another view that is declared the same way and she is also pulling the style, so I don’t know if it is really a reference error

  • 1

    It seems more strange that the style is appearing correctly in some cases than it is not appearing in others. I believe referencing within the iframe would solve.

  • I will try to reference in iframe, in real it only takes the style when the modal is called automatically, if it is called by the button, press normally, in any part of the system happens the 2 cases

  • 1

    Is there always a button to open the modal? If yes, on automatic startup you can also test force-click the button instead of that repeated code. Thus: $("#footballDebrirModal"). click(); Since it always works when clicking...

  • 1

    Dude, pulling the css in the iframe didn’t work, but the one about pulling the button yes, he managed to run with the style, apparently the problem so this when I say give the . direct modal("Show"), I didn’t quite understand why, but this forcing button worked, Thanks!

Show 3 more comments

1 answer

1


There is always a button to open the modal?

If yes, on auto-start you can also test force-click the button instead of that repeated code, since it always works after clicking the button.

Thus:

$("#botaoDeAbrirModal").click(); 

Browser other questions tagged

You are not signed in. Login or sign up in order to post.