bootstrap modal in background not usable - html

i use bootstrap on my website and i have modals which were working perfectly.
Since yesterday, my modals are not usable anymore. The grey background which should cover the area around the modal is now on the whole page. Thus, it's impossible to click on the modal or to use it. I have to reload the page manually.
Here is a screenshot :
I use the last version of Bootstrap (3.3.7). Even with the most basic modal exemple from official Bootstrap documentation it does the same :
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I don't know where it could come from, since it's a bought template i didn't create myself.
Thank you in advance for any help

Related

Bootstrap Modal not working when clicking button

I am trying to create a bootstrap modal to pop up when clicking a button. I watched some trailers and did the same. Nothing happens when I click the button. I also copied an modal example from bootstrap but also not working. What is wrong?
here is the code:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This should work since it is copied from bootstrap webpage but it is not working.. Please help. I am using Flask if that is of any help.
Solved. Seems like I had bootstrap v.5 and I did copy modal from bootstrap v.4. It is working now!

Trigger a Modal without a button

I have a very basic question. I am developing a login page in .cshtml format. Now I want to implement a modal in bootstrap without using a button. Like if the "condition is wrong" in login credentials then show the modal. I give you the condition below.
technically I see lots of bootstraps available with buttons but I do not want that. I want the modal to execute automatically. or the HTML part of the modal to get triggered without a data target.
#if (ViewContext.ModelState.IsValid == false)//condition for login failure, its in a file called _validation summary.cshtml
{
// Modal html we may change it.
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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 -->
}
Thanks in advance,
Jay
You can use the JQuery to invoke a modal, like
$('#modalId').modal("show");
$('#modalId').modal("hide");
$('#modalId').modal("toggle");

Bootstrap 3 two modals switching - scrolling page

I've got two Bootstrap 3 modals as below. One modal is switching to another - and there is a button - "Go back" to previous modal. Unfortunatelly modals are long and when I'm switching back - scrolling works but for website, not for previous modal. Anyone knows how to fix it?
I'm using the default bootstrap css and js files, google chrome
Complete HTML code as below:
<head>
<!-- scripts: jquery.min.js; bootstrap.min.js css: bootstrap.min.css -->
</head>
<body>
<button type="button" data-toggle="modal" data-target="#addOffer">Add offer</button>
<button type="button" data-toggle="modal" data-target="#viewOffer">View offer</button>
first modal:
<div class="modal fade" tabindex="-1" id="viewOffer" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">View offer</h4>
</div>
<div class="modal-body">
lots of text about offer here:
<button type="button" class="btn btn-info" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
second modal:
<div class="modal fade" id="addOffer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add offer</h4>
</div>
<div class="modal-body">
lots of forms for new offer here:
<input id= "see_offer" name="see_offer" type="submit" class="btn btn-info" value="View offer" data-dismiss="modal" data-toggle="modal" data-target="#viewOffer" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add .modal { overflow-y:auto; } to your css file.
The regular data-toggle:"modal" button will do, as suggested, toggle the modal visibility. The buttons in your page may remain so. However, you seem to want your modal buttons to hide one modal and show another, so set a function to them manually like so:
$("[hide-modal]").click(function () {
$(this).attr("hide-modal").modal("hide");
$(this).attr("display-modal").modal("show");
});
Then in your modal buttons:
<button type="button" class="btn btn-info" hide-modal="#viewOffer" display-modal="#addOffer">Go back</button>
<button type="button" class="btn btn-info" hide-modal="#addOffer" display-modal="#viewOffer">View offer</button>

background pixels flickering on bootstrap modal

Anybody know bootstrap modal background issue?
flickering background pixels
jsfiddle
HTML
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</div>
I changed .fade.in opacity property on bootstrap.min.css from 1 to 0.99: .fade.in{opacity:0.99}
and that solved the problem while a better solution appears.
* update*
try this on bootstrap.min.css
.fade.in{opacity:1;-webkit-backface-visibility: hidden;}
It looks like bug in bootstrap,
i got the same issue and i found out that it caused by elements on the page that got opacity property.
i manage to reproduce it on bootstrap site
hope it will help you.
furthermore, it happen only on chrome.

bootstrap modal wrong content

I am trying to make a Bootstrap modal, but right now when I open it up it inserts the html from the entire page and inserts it into my modal. I copied the sample modal straight from w3schools and I'm not using any JQuery to dynamically update it or anything.
When the modal is hidden the html shows me the correct structure: My navbar, content, then the hidden modal with the proper modal content. When I show the modal everything messes up. The same structure exists with the navbar, then content, then modal (not hidden as it should be). However, this time inside the modal is the html from the rest of the page repeated. A second modal along with the correct modal content is buried inside of the repeated html content, but it is also hidden. The result is that I see two versions of the body content, one in front of the other. When I hide the modal everything goes back to normal.
In other words this:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Keeps getting changed to this:
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<meta></meta>
<title></title>
<script></script>
<div class="navbar"></div>
<div class="container"></div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I should also point out that it does not duplicate tags such as head or body. It really doesn't make sense to me why the inside of the modal div is being changed at all when I want it to remain static. Any help is appreciated, thank you.