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:
However, if I go to another view and open the modal, calling by button, it opens normally, with the style loaded, follows print:
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");
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...
– Joao Paulo
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/
– Dan Oliveira
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.
– Joao Paulo
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
– Dan Oliveira
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.
– Joao Paulo
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
– Dan Oliveira
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...
– Joao Paulo
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!
– Dan Oliveira