bootstrap modal animation open/close with animate.css - bootstrap-modal

Please anyone can help me, How can animate css styles can be use to animate while bootstrap modal opens and closes?
As Modal Opens it should be open with fadeIn effect and while closing it should with fadeOut effect.
I wanted to use animate.css css stylesheet for animate modal poup open and close.
It should add class fadeIn while opening Model and while closing the modal it should be adding class fadeOut. ( Class .fadeIn & .fadeOut are from aniamte.css stylesheet)

$('.modal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated');
})
$('.modal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated');
})
This is I wanted.

Add fade to class attribute of your modal markup:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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 with animation</h4>
</div>
<div class="modal-body">
Close modal to see <i>fade-out</i> effect.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal with <i>fade-in</i> effect
</button>
Remove the .fade class from your modal markup to simply appear one. See Remove animation section for details.

$('#modelDivId').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipInX animated');
})
$('#modelDivId').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipOutX animated');
})

Related

Flatpickr inside of Bootstrap modal can not type in year input

I have a problem with Flatpickr rendering in a Bootstrap modal.
When I open a Flatpickr entry within a modal, everything seems to work fine except for entering a year. When I want to click on the year, the input field does not work.
Thanks for help.
Flatpickr version 4.6.9 and Bootstrap version 5.1.1
In order to use the month and year picker you need to use the Flatpickr option static: true. This way it will not hide behind the modal.
$(document).ready(function() {
const flatpickr_time = $('#flatpickr_time').flatpickr({
//static: position the calendar inside the wrapper and next to the input element*.
static: true
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-4 m-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input id="flatpickr_time" style="width:200px;">
</div>
</div>
</div>
</div>
I've had the same issue and while the solution proposed by Crezzur did work, it had some side effects that I didn't want.
I was able to find that the issue was caused by bootstrap being a bit too aggressive with the focus, which means it can be fixed simply by adding bs-focus="false" to your modal.
Example:
<div class="modal" role="dialog" data-bs-focus="false">

Bootstrap button to show modal has to be clicked many times to open the modal

I am using Bootstrap4 and in my navbar i have a button to open a modal.I have added jquery,popper and bootstrap js in correct order as mentioned in bootstrap website .I have to click this button 5-6 times continuously to open the modal
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" />
my modal is
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
<asp:Label ID="lblLoginID" runat="server"></asp:Label><br />
<asp:Label ID="lblIPAddress" runat="server" ></asp:Label><br />
<asp:Label ID="lblSystemName" runat="server" ></asp:Label><br />
<asp:Label ID="lblVersionInfo" runat="server" ></asp:Label>
</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>
I tried using javascript to open the modal by using this code
<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" OnClientClick="return openmodal();return false;" />
<script type="text/javascript">
function openmodal() {
$('#userDetails').modal('show');
}
</script>
However this does not work .My javascript function is being called as i put an alert message and tested .There is something weird happening with vertical scroll bar though on click of the button ,it shows up for sometime on click of button and vanishes i think once button click event ends .
The issue is with "fade" in the modal
<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
i removed fade and used "show" and the modal is working
<div class="modal show" id="userDetails" tabindex="-1" role="dialog" >
also i added a javascript function for the button that triggers the model
<script>
$( '#btnUserDetails').click( function(){
$( '#userDetails').modal('show');
});
</script>

How to create a modal that shows blog-posts in blogger homepage?

I have a blogger website; in the homepage (index page) there are blog-posts (thumbnail, title, snippets and "view" button). I need to create a modal that pops-up when the "view" button is clicked. It should show blog-post title, image thumbnail and some other post details.
How to achieve that please ?
I tried java script but the modal shows only one blog-post when click on each "view" button.
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js'/>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#Shop">view</button>
<div id="Shop" aria-hidden="true" aria-labelledby="Shop" class="modal fade in" role="dialog" tabindex="-1" display="block">
<div class="modal-dialog modal-lg">
<div class="modal-content simpleCart_shelfItem">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title"><a expr:href='data:post.href'><data:post.title/></a></h4>
</div>
</div>
</div>
<script>
$('#Shop').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var title = "<data:post.title/>";
var modal = $(this)
modal.find('.modal-title').text(title)
})
</script>

How to pass the values to bootstrap modal window and show the dynamic content

I need to pass the userName to the bootstrap modal window and show the passing name in modal window.
For example,
If i pass jawa the modal will show the content like 'This is jawa'
we need to add the attirbute data-id the in your button like as below,
<button type="button" data-toggle="modal" data-target="##myModal" data-id="jawa">Delete</button>
This JS function will be called before open boostrap modal window. And in that function we can able to get the data-id attribute value and then we can able to write a code based on getting value. See the below code,
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function(event) {
var userName = $(event.relatedTarget).data('id');
$("#modalText").html("You are going to be deleted" + userName);
});
</script>
This is the modal window code,
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="cancelModal">Google Map</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="modalText"></div>
</div>
<div class="modal-footer">
Open in new tab
</div>
</div>
</div>
</div>
Thanks,

Bootstrap modal and BXslider not working

HTML:
<!-- Button trigger modal -->
<a href="#" data-toggle="modal" data-target="#myModal" class="quickview">
OPEN MODAL
</a>
<!-- 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">BX Slider</h4>
</div>
<div class="modal-body">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
<a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/hill_fence.jpg" /></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
slider.destroySlider();
//$('#myModal').modal('show');
slider.reloadSlider();
}
$(".quickview").on("click", quickView);
I have a Bootstrap modal which I'm injecting dynamic image galleries into. So fx. I have 10 links on a page, each link is containing unique data-attributes with image URLs. I am then sending these URLs into my click event, so I can use them with BXslider, but it doesn't seem to be working.
I'm reloading the BXslider within my click event, but the "mainimage" is not showing.
However, if I move the code out of the click event, it seems like it's working.
Any suggestions here?
Codepen:
http://codepen.io/marting/pen/dYNabj?editors=101
I changed your code to this, and it works like a charm
JS:
function quickView() {
var slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
controls: false
});
setTimeout(function() {
slider.reloadSlider();}, 200);
}
$(".quickview").on("click", quickView);
See it works here: http://codepen.io/anon/pen/JYgxOE?editors=101