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.
Related
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 have used modal popup of Bootstrap in my project and want following things:
When open modal popup and click on the background popup should not close.
When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
After open modal popup user can also work on the background that time popup should not close.
1) When open model popup and click on the background popup should not close.
Include data attributes data-keyboard="false" data-backdrop="static" in the modal definition itself:
<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
// Modal HTML Markup
</div>
2) When open model popup background should not blur. meaning opening model popup background should not affect any way.
Set .modal-backdrop property value to display:none;
.modal-backdrop {
display:none;
}
3) After open model popup user can also work on the background that time popup should not close.
Add values in .modal-open .modal
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
SideNote: you may need to adjust the width of modal according to screen size with media queries.
Disclaimer: This answer is only to demonstrate how to achieve all 3 goals If you have more then one bootstrap modal, above changes will effect all modals, highly suggesting to use custom selectors.
.modal-backdrop {
display: none !important;
}
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-sm">
<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>
Working Fiddle Example
backdrop="false" will remove background black screen only but it will not allow you to do anything on background element.
To keep background interactive and keeping modal in middle position with full view you need to remove 'modal' class using js code after modal generate.
and need to use some custom css style. Add a custom class with modal
<div class="modal fade custom-modal" id="myModal" role="dialog">
<div class ="modal-dialog" role="document">
<div class ="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header moveable-modal-header"></div>
</div>
</div>
</div>
</div>
//cs styles//
.custom-modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
padding: 0 !important;
}
.modal-dialog{margin: 0;}
now after populate modal need to remove 'modal' class from myModal div
function openModal(){
$("#myModal").modal({backdrop:false,show:true});
$("#myModal").removeClass("modal");
//this will make modal moveable//
$("#myModal .modal-dialog").draggable({
handle: ".moveable-modal-header"
});
}
If you want to work on input/textarea elements when the modal is open you can use this.
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
We had been struggling with modals opening in background since 6 months and the following settings has resolved it for all our clients:Please change the cache behavior in IE from “automatic” to “Every time the page changes”.
I'm just wondering what's the best way to format three buttons so that they show correctly on various screen sizes. So, this is what I've done so far and it looks good on 1200px width screen.
What I've done is I used the buttons and put them into span4 classes. Like so:
<div class="row-fluid">
<div class="span4">
<a class="header-btn" href="#">Testbutton 1</a>
</div>
<div class="span4">
<a class="header-btn" href="#">
Testbutton 2
</a>
</div>
<div class="span4">
<a class="header-btn" href="#">Testbutton 3</a>
</div>
</div>
However, when I shrink the screen size it looks bad and the buttons break up.
I would like to have the buttons displayed below one another once the screen size gets too small.
I could edit the span4 class from bootstrap but this could mess with the other layout... So should I just add a new class and make everything reponsive, or work with the bootstrap framework?
Please advise.
Thanks!
You seem to be using it right for v2, so maybe you might not be having bootstrap loading in correctly.
but I suggest upgrading to v3 or v4, you can learn more in the Docs. http://getbootstrap.com/css/#grid
All buttons will be inline horizontally with each other but as the screen gets smaller. the buttons will adjust and then go vertically with each other. depending on how you have it set up. But this makes it responsive.
You might want something like this, in the html:
! To see everything working the way it should, when you click the run snippet button. Click full page and then drag the side of the browser smaller and smaller, and you will see the buttons adjust. !
I hope this helps!
.div-container{
border: 1px solid black;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
button{
margin-left: 45% !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='div-container'>
<div class='row'>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
</div>
</div>
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'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.