2

Tenho uma modal que é aberta quando a aplicação é iniciada, fiz a verificação se é a primeira vez que o usuario loga no sistema por meio de um cookie. O problema é que quando a modal é obrigada a executar, ela não carrega o style, segue um print de como ela abre quando a aplicação obriga ela a executar:

inserir a descrição da imagem aqui

Porém, se eu ir para outra view e abrir a modal, chamando por botão, ela abre normalmente, com o style carregado, segue print:

inserir a descrição da imagem aqui

Após isso, caso eu volte para view Home(Onde ela é chamada forçada quando a aplicação é iniciada) e clique no botão para exibir a modal, ela carrega o style normalmente.

O segundo caso é, Quando eu inicio a aplicação, ela exibe a modal sem o style, e caso eu permaneça na pagina e clique no botão de exibir a modal, ele continua exibindo sem style, ele so volta a exibir com style caso eu mude de pagina.

OBS: Tentei fazer isso usando outras paginas além da "home" para receber a modal quando inicia a aplicação, para ver se o problema era nela, mas em todas da o mesmo problema.

Segue o código que chama a minha modal quando ela é iniciada:

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

Ele cria o Cookie para saber se a aplicação esta sendo iniciada e exibir a modal, e renderiza a modal, e o body ele renderiza uma outra pagina da minha aplicação, que é a pagina da modal. Fiz essa modal externa pois ela será utilizada em diversas partes do programa. Codigo da modal:

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

Como ja disse anteriormente, tenho um botão também que abre essa mesma modal, o botão utiliza o mesmo codigo do que renderiza a modal quando a aplicação é iniciada, sendo as duas ultimas linhas do codigo:

// Exibo o modal
                    $('#ModalBody').html('<iframe width="100%" height="100%" frameborder="0" allowtransparency="true" src="/Facility/ActiveFacility"></iframe>');
                    $("#OpenModal").modal("show");
8
  • 1
    Noto que o conteúdo da modal vem de um iframe. Após abrir um modal com falha de estilo, ao inspecionar a aba console(F12) você verifica algum erro descrito ?Especialmente algum erro relacionado ao não carregamento de algum arquivo de css...
    – Joao Paulo
    Commented 16/08/2018 às 14:50
  • 1
    Você está referenciando os arquivos css dentro desse iframe? Pois a referencia de css da página que chama o iframe não afeta (ou nao deveria afetar) o conteúdo do iframe.
    – Joao Paulo
    Commented 16/08/2018 às 16:05
  • 1
    Me parece mais estranho que o style esteja aparecendo corretamente em alguns casos do que ele não estar aparecendo em outros. Acredito que referenciando dentro do iframe resolveria.
    – Joao Paulo
    Commented 16/08/2018 às 16:28
  • 1
    Sempre existe um botão pra abrir o modal? Se sim, na inicialização automatica vc também pode testar forçar o click no botão no lugar daquele código repetido. Dessa forma: $("#botaoDeAbrirModal").click(); Já que sempre funciona ao clicar...
    – Joao Paulo
    Commented 16/08/2018 às 16:37
  • 1
    Cara, puxar o css no iframe não funfou, mas essa de puxar o click do botão sim, ele conseguiu executar com o style, aparentemente o problema então esta quando eu mando dar o .modal("Show") direto, não entendi direito o por que, mas essa de forçar o botão funcionou, Valeu! Commented 16/08/2018 às 16:43

1 Resposta 1

1

Sempre existe um botão pra abrir o modal?

Se sim, na inicialização automática você também pode testar forçar o click no botão no lugar daquele código repetido, já que sempre funciona após o click no botão.

Dessa forma:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .