0
I have the following scenario: a link
that opens a modal.
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Sistema de Controle Operacional</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/kendo")
@Styles.Render("~/Content/blueimp/css/blueimp-gallery")
<link rel="Stylesheet" href="~/Content/bootstrap/datepicker/bootstrap-datetimepicker.min.css" media="screen" />
<link rel="Stylesheet" href="~/Content/Site.css" media="screen" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<!--[if IE]><script type="text/javascript" src="../../Scripts/excanvas_r3/excanvas.compiled.js"></script><![endif]-->
</head>
<div id="divHistorico" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<a data-toggle="modal" data-target="#divHistorico">
<img src="~/Content/icons/history.png" style="width:24px;cursor:pointer;" title="Histórico" />
</a>
@Scripts.Render("~/lightboxGallery")
@Scripts.Render("~/bundles/kendo")
@RenderSection("scripts", required: false)
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/plugins/datetimepicker/jquery.datetimepicker.css" />
<script src="~/Content/plugins/datetimepicker/jquery.datetimepicker.js"></script>
<script src="~/Content/datatable/jquery.dataTables.min.js"></script>
<script src="~/Content/datatable/dataTables.bootstrap.min.js"></script>
<script src="~/Content/datatable/date-eu.js"></script>
By clicking on link
, the modal is open, but soon after it is closed, not being open as I wish. What I need to do ?
Dude, here it worked properly, take a look at the version of your bootstrap and make sure there’s no other script affecting it directly, working example
– JuniorNunes
True, this code opens a modal perfectly, and it stays until you close, it’s not closing automatically. See if you have any javascript that is setting some timeout to close the modal.
– Ricardo Pontual
I inserted all my js and css that are being referenced in order on my page. @Ricardopunctual
– Raphael Prado de Oliveira