I'm pretty stuck on this problem that I'm having getting Bootstrap modals to pop up. Here's an example:
http://jsfiddle.net/xaU5d/
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">
Launch demo modal</a></p>
</div>
And pulling the css from:
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css
Essentially, the when the button is pressed, the modal tries to load (the style changes to the body happen which causes it to dim), but the tags containing the modal content never get rendered.
I believe this is a CSS problem at heart. When you remove the css and rerun, the styles go away, of course, but clicking on the anchor actually causes the change to happen.
I have to assume it's something that I'm doing, so could anyone look at the jsfiddle example and let me know where my error is?
Thanks in advance!
Not a full answer, but adding modal-content to your `div id="example`` allows the modal to run, but not on the correct layer.
Bootstrap 3 changed how they load modals a bit:
Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior.
Related
Sorry for my English...
My code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="product-grid">
<div class="product-image">
<a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<p class="title">Mochila doble tirantes Violeta</p>
</a>
</div>
<div class="price">$16.00</div>
<div class="div-zoom">
<span class="zum-warenkorb">zum warenkorb hinzufügen</span>
<a href="#">
<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
</a>
</div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
</div>
</div>
I to want the modal window open beside from original image.
I tried with flex in <style>,
.modal-content {
/* Styles to make the modal visible */
display: flex !important;
opacity: 1 !important;
margin-top: 500px;
}
.modal-dialog {
justify-content: left !important;
}
.modal-content {
width: left !important;
}
But because of modal open per default at the top, to come this image,
I to want which modal centred the open window and it open besides from the original image.
Can please someone help me with this problem, Thanks!
What you want is not easily achievable, as Bootstrap modal wasn't developed for this purpose. That's not to say it can't be done, but rather that there are better UX solutions than trying to crowbar a modal into this UI behavior.
That's because Bootstrap modal is designed to completely ignore the layout of the page over which it renders and to occupy the entire viewport. It also disables scrolling on the page while it's open and it creates a backdrop at <body> level which covers the entire page.
A better approach for your use case would be to dynamically inject the product into the modal and display it there.
Another possible solution is to use a Bootstrap popover (which was pretty much designed for your use case - a "modal" relative to a particular element). Think of it as the result of breeding a tooltip with a modal. But the more it is like a modal, the bigger UI problems it's going to generate.
In my opinion, popovers break a lot of UX best practice principles and typically require a lot of fixes/workarounds for various device + platform combos. Overall they tend to make your application more brittle, your code less flexible, so I strongly advise against using them.
As far as I'm concerned, the only decent solution is to disable popovers on mobile devices and provide a mobile-friendly alternative (accordion, modal, drawer). But, if you're gonna do that, why not try to be consistent and provide the same alternative on desktops as well, adapted to the extra available space?
If you need help implementing either solution, please consult Bootstrap documentation for a) dynamically injecting content into modals or b) using popovers.
If you run into any trouble, I suggest you ask a new question focusing that specific problem.
I'm trying to create a collapsable div that holds thumbnails for images. So far, everything works except that the div content (the thumbnails) flashes and disappears upon collapse and expand. The content is there, it just doesn't stay. If you're quick enough you can click the thumbnail as it flashes and it takes you to the image path. My div looks like this:
<div class="col-lg-8 col-lg-offset-2">
<div id="images" class="accordion-body collapse">
<a href="../images/1953.01.09.00.jpg" class="thumbnail">
<img src="../images/1953.01.09.00.jpg">
</a>
</div>
</div>
And my button:
<a class="btn accordion-toggle" data-toggle="collapse" href="#images">Images »</a>
You can look at my full code here: https://jsfiddle.net/krbylit/jttyq8jv/
Add this to your CSS
.collapse.show {
visibility: visible;
}
For some reason your bootstrap doesn't toggle this property correctly
sometime the case might be some css changes the color of the text inside to white so simply applying the inline css might help :
style="color : black; "
I would like to add a background image on the header of the modal and so I thought if I would do the following:
.modal-header{
background-image: url('../images/extended_top_provider.gif');
}
The header would display the image but it does. Instead it does the following:
I also tried to add icons for the different browsers but it doesnt display the image either.
Any help would be appreciated
UPDATE
I am able to add the image, not the right one, something wrong with the path of the image, but the images below are not aligning correctly, I do not know why.
$(function(){
$('##myModal').modal('show');
});
.client_logos {
display: inline-block;
width:100%;
}
<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');">
<button type="button" class="close" data-dismiss="modal">x</button>
<h2 class="modal-header">Outdated Browser Detected</h2><p>Our website has detected that you are using an outdated browser. Using your current browser will prevent you from accesing featuers on your website. An upgrade is not required, but is strongly recommend to improve your browsing experince on our website.<br /><br />
<b>Use the links below to download a new browser or upgrade your existing browser.</b></p>
</div><!---Modal-Header Div--->
<div class="modal-body client_logos">
<p> <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e3/Firefox-logo.svg/120px-Firefox-logo.svg.png" alt="image" />
<img class="img-responsive" src="https://productforums.google.com/forum/image/GDF/15104268797498972201/8f39d8ec-5483-4e30-977d-817c8fd1c110" /> </p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container-->
This is probably because of one very simple reason, background-image property does not take any width and height, so you may specify your width and height to .modal-header like this :
.modal-header{
width:100px;
height:100px;
background-image: url('../images/extended_top_provider.gif');
}
Try this, and spot the difference, if you want you could simply add an <img> tag inside your .modal-header but note that background-image doesn't stop page rendering, while img tag does :)
I'm using the Angular UI modal and would like to make it smaller. According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:
<div class="modal-dialog modal-sm">
I'm having trouble incorporating this div into my Angular modal template. Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template. Are the outer modal, modal-dialog, and modal-content divs already provided by Angular? If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div? I tried adding the full modal div structure to the template and it caused problems with my modal. I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either. Any ideas? Thanks.
Update: here is the content of my modal template after I tried to include the outer Bootstrap div's. It is a very simple modal to confirm the user wants to delete an item.
<div class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4>Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirm()">Confirm</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
The result is it doesn't show my modal correctly. I can see the backdrop and a very tiny sliver of what I assume to be my modal.
Update: Using #lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the #modal-sm Less variable.
.confirm-modal .modal-dialog {
width: #modal-sm;
}
OK, I understand now. Here's what we did in the .css:
.appcustom-modal-med > .modal-dialog {
width: 60%;
}
then in the controller:
windowClass: 'appcustom-modal-med'
I never had an experience with Bootstrap modal popup before. But in a recent theme purchase that was fully bootstrap based they demoed modal popups too which was perfectly working on their HTML page. But when I integrate in my master page, everything working fine. But the modal popup alone shows as double as you can see in the image below
I didnt get any idea why it behaves likes this when everything in the HTML page and ASPX page are alike. Also when the modal popup shows, there is a shifting like thing goingon on the page or a kinda small jumping towards the right when the modal popup comes.
Here is my modal popup code
<div class="modal fade bs-example-modal-sm" id="mytestmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
And here is the button code
<button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
<i class="fa fa-copy"></i>| Clone Data
</button>
For that jumping, edit it's CSS
body.modal-open{
overflow: visible !important;
}
The lateral shifting is a known open bug in Bootstrap.
Assuming your modal isn't long enough to need to be scrolled, you could try this supposed workaround:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}