I have searched the web for answers on this one with this question is closest to my own.
Bootstrap Modal popping up but has a "tinted" page and can't interact
I am creating an admin page with bootstrap and i am using modals in there.
The styling is done with Bootswatch themes.
When using some themes, opening a modal, the modal appears in a tinted page and everything freezes. I have to refresh the page to get rid of it again.
I have tried to move the modal to the bottom of the page, just before the closing
</body>
tag.
Nothing works!
Strange thing is, that with the "Basic" bootstrap css, it has the same problem.
There are some Bootswatch themes that work as they should, and some others give this problem.
I made and example in jsFiddle here: http://jsfiddle.net/qyo53dxh/
This one is with the "Paper" theme from bootswatch.
When using i.e. "United" theme, it does work normal.
What is going on?
In your fiddle you are importing bootstrap.css and bootstrap.min.css?
Please remove
bootstrap.css
And all is working nice.
<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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">Sluiten</span>
</button>
<h4 class="modal-title">Wachtwoord resetten</h4>
</div>
<div class="modal-body">
<p>Typ uw email adres</p>
<input type="email" name="recovery-email" id="recovery-email" class="form-control" autocomplete="off">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-custom">Herstellen</button>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
Here is working fiddle
http://jsfiddle.net/qyo53dxh/1/
Add This into style tag
.modal {
background: rgba(255, 255, 255, 0.8);
}
.modal-backdrop {
display: none;
}1200;
Related
I have used a single page HTML page in which I have three div. When I click one of the div modal popups and loads the iframe src. The problem I am facing is iframe is not getting loaded properly when I click the div first time. However in chrome, if I right click and then enter reload frame, my iframe is getting loaded properly. Can anyone say what is the issue I am facing? Why the iframe is not getting loaded properly the first time. I am clueless about this issue. Could anyone please assist me.
My html Code : Posting one div and its corresponding modal popup code
Div Code :
<div class="bots" data-toggle="modal" data-target="#myartModal">
<font class ="botHeading" ><b> Password Related</b></font><br />
<font class = "botsub">Click here to Change,reset,enroll or unlock your account.</font>
</div>
Modal Popup
<div class="container">
<!--<h2>Basic Modal Example</h2>
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 class="modal fade" id="myartModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg customModalHeight" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header customModalHeader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" ><b>Account Recovery Agent</b></h3>
</div>
<div class="embed-responsive embed-responsive-4by3 z-depth-1-half customIframeHeight">
<iframe class = "embed-responsive-item" src="http:/xx.xx.xx.xx:4001/" allowfullscreen></iframe>
<!-- <iframe class = "embed-responsive-item" src="http://xx.xx.xx.xx:4001/" allowfullscreen></iframe> -->
</div>
</div>
</div>
</div>
</div>
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
I'm trying to launch a Bootstrap modal without using any buttons or jquery. I would just like show a bootstrap modal when page loads as a information and user should be able to close it using close button or it should close when clicked anywhere on the page. I have tried to use the solution from this SO question
load-without-firing-button-or-using-jquery
However, using the suggested solution prevents the modal from being closed using data-dismiss.
.modal {
display:block;
}
Is there a reason why modal doesn't close in this case ? I have tried applying seperate CSS class but it doesn't make a difference.
.mymodal {
display:block;
}
HTML
<div id="registrationModal" class="modal fade in mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Text
</div>
</div>
</div>
Is it possible to achieve this without using jquery? or valid explanation why such thing is not possible?
The modal doesn't close because there are multiple functions that do different things when you open and close the modal. So when you open the modal the class .in, display block are added and area-hidden="true" is removed from that element. So when you click close there is reverse function. In your case just adding the display block will not work because you need to remove the class .in and remove the whole area-hidden="true" attribute.
Here is the working code:
<style>
.modal{display:block;}
</style>
<script>
$(function() {
$(".modal").addClass("in");
$(".close").click(function(){
$(".modal").removeClass("in").css("display","none").attr("aria-hidden","true");
});
});
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal">
Launch demo modal
</button>
<div id="my-modal" class="modal fade in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Hello World!
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade"></div>
Sorry I know you mentioned no jQuery, but there is no CSS fix that I'm aware of, and the jQuery required for this is minimal.
I'd suggest displaying it like this, maybe If no better answer comes up you may consider it:
$('.modal').modal('show');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="registrationModal" class="modal fade in mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Text
</div>
</div>
</div>
In the default magento 1.9 version, I am facing a problem with modal popup.
It's working fine but the form tag is being automatically removed. When I view the page source, the form tag is there. I don't know what I'm doing wrong.
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form id="modalForm" name="modalForm" action="/test" method="post">
<input type="text" name="text" />
</form>
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
Fiddle demo
Any help?
I experienced this exact problem today (although I was using Spree rather than Magento). My mistake was placing the bootstrap modal html within an existing form element.
Chrome automatically removes form tags within an existing form element. See question here.
Moving your modal window to the bottom of the body tag may help.
I'm making an application form that's on a modal and I made it so the user can upload their picture on the application form. So I have my thumbnail with a "upload picture" bubble inside it, and when I click it, a modal pops up. However the problem is when I click on "cancel" or "upload" on my "upload picture" modal, it closes both modal windows (application form and upload picture).
I'm using bootstrap and here's a snippet of my code:
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Application Form</h4>
</div>
<!-- START OF MODAL BODY-->
<div class="modal-body">
<div class="col-sm-5">
<div class="thumbnail">
<div class="avatar">
<a href="#" class="thumbnail bottom-15" data-toggle="modal" data-target="#upload-avatar">
<img src="img/face1.jpg" alt="...">
</a>
<!-- Upload new avatar bubble -->
<div class="avatar-bubble">
<i class="fa fa-plus"></i> Upload new avatar
</div>
</div>
</div>
</div>
<!--Modal for uploading photo-->
<div class="modal fade" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="upload-avatar-title">Upload new avatar</h4>
</div>
<div class="modal-body">
<p>Please choose a file to upload. JPG, PNG, GIF only.</p>
<form role="form">
<div class="form-group">
<label for="file">File input</label>
<input type="file" id="file">
<p class="help-block">Files up to 5Mb only.</p>
</div>
<button type="button" class="hl-btn hl-btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="hl-btn hl-btn-green" data-dismiss="modal">Upload</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div> <!-- END OF APPLICATION FORM MODAL BODY -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Basically I put my second modal within my first modal.
Although the Bootstrap 3 docs say "Overlapping modals are not supported..", I think I found a workaround that works. You need to..
Make sure your 2nd modal's markup is outside the body of the 1st modal
Manually close the 2nd modal by using the Bootstrap modal toggle method in jQuery.
Change the z-index of the 2nd modal so that it appears over the first.
http://bootply.com/108243
Also, I changed your markup to remove the fade and `display:none'.
I've opened a modal from another modal. I call it 'modalception'. It sounds like you just need to make sure your events are targeting the correct modal.
I have overlapping modals, and they work as expected. Clicking the background of the second modal closes that modal only, not the one behind it.
Just set the z-index correctly. Be sure not to nest them, and it should work just fine. It is not "supported", but I do it all the time. A project I am currently working on stacks 3 on top of each other with no problems.
I am using Bootstrap v3.3.2 and jQuery 1.11.2.