I use a lot of modals on my current project. I'm using the Animated.css library for animations. - The problem is that I want to use a animation when the modal close. E.g: open modal = flipInX / closing modal = flipOutX
I've seen a lot of these questions, but I can't get it to work for me. I want the effect to work on all of my modals, not just one specific.
<div class="modal animated flipInX fade modal-fullscreen" id="info" tabindex="-1" role="dialog" aria-labelledby="d01" aria-hidden="true">
<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>
</div>
<div class="modal-body">
<div class="container-fluid">
</div>
</div>
</div>
</div>
</div>
.modal {
transiton: opacity 2s;
}
.modal-close {
opacity: 0;
}
you can add the class to do the animation when the user close modal.
getElementById('btn-close-modal').classList.add('modal-close')
thus, the modal will assume 0 of aptitude with the animation defined in the modal-close class
Related
I'm creating a modal window using bootstrap to show some text with an image. Problem is the image spills out of the modal. I've tried adding responsive class to the image but it did not worked.
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalBasic">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Upgrade to Basic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
<img src="./img/upi.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
I've tried removing modal-sm class, but it failed on small screen.
Set the image's width property to 100% or add CSS property
.img-responsive { width: 100%; }
What you want to achieve is image should resize according to the width of the modal. Therefore image's width should adhere to the modal's width.
Working example: https://codesandbox.io/s/sharp-villani-1lsjw5?file=/index.html:2228-2298&resolutionWidth=456&resolutionHeight=675
I am using vue.js with Bootstrap.
There is modal dive which shows like below I am finding a class that increase the width of modal div,
My modal div looks like this. I am planning to add 12 more tabs and for that I will need more width.
I am using modal-lg class to set the width.
I am using below code for modal div
<div class="modal fade" id="modal_create_product" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Create Product
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Form Errors -->
<div class="alert alert-danger" v-if="createForm.errors.length > 0">
<p class="mb-0"><strong>Whoops!</strong> Something went wrong!</p>
<br>
<ul>
<li v-for="error in createForm.errors">
{{ error }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I just do
.modal-lg {
max-width: 70%;
}
Why don't you use the min-width CSS for your modal-content?
Like this:
.modal-dialog.modal-lg {
min-width: 80%
}
I need to disable peak effect (strong pressure's effect with Safari on iPhone 6s) on "a" element in this code (bootstrap environment):
<article>
<div class="gall-thumbnail">
<a data-toggle="modal" href="mod1#">
<img src="img.jpg"/>
<p class="text-center caption">Caption</p>
</a>
</div>
<div class="modal fade" id="mod1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title text-center">Caption</h5>
</div>
<div class="modal-body">
<img src="img.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
</article>
I need to disable it because if strong pressing with Safari on iPhone 6s then bootstrap's "modal" component is here in conflict with "peak", and it shows picture other than enlarged img.jpg.
So it would be nice to disable "peek" on "a" element or to show enlarged img.jpg when strong pressing with Safari on iPhone 6s.
If you would like to disable peeking when you "strong" press an element on iOS you can set the webkit-user-select and the webkit-touch-callout property to none in css. If you are trying to prevent it on all "a" tags you could do something like this:
a{
-webkit-user-select:none;
-webkit-touch-callout: none;
}
Demo
I need to change only the background of one of the Modals with specific ID #firstModal which I am using in Bootstrap 3 by using this CSS rule
#firstModal.modal-backdrop {
background-color: green;
opacity: 1 !important;
filter: Alpha(opacity=50);
}
and here is the modal
<div id="firstModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">First Modal</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Why is this not working?
TRY - DEMO
CSS:
/* CSS used here will be applied after bootstrap.css */
#firstModal {
background-color: green;
opacity: 1 !important;
filter: Alpha(opacity=50);
}
I have a modal window which open up when the user focuses on search input box. but currently when the modal opens, the modal background overlay blocks it.
How can i move the modal overlay background lower or something, so the user can still type on the search input box while the modal window stays opens .
<form>
<input type="email" class="form-control border-left-none" id="openmodalOnfocus" placeholder="enter text">
</form>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-md-4">
lorem i[p sum on left
</div>
<div class=" col-md-4">
lorem ipsom on right
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Just add this to your css:
.modal-backdrop {
z-index: -1;
opacity: 0 !important;
width: 0px;
height: 0px;
}
You can edit your CSS so the modal backdrop will never show:
.modal-backdrop {
display: none;
}
Check the docs for jQuery activation of Bootstrap modals here.
You can show a modal without the backdrop by simply adding the data-backdrop attribute to the modal div and setting it to false:
<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>