I would like to apply animations on bootstrap3 modal box using animate.css. But it is not working for me.
Here is my code snippet
<html lang="en">
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css" rel="stylesheet" />
</head>
<body>
fade InLeft | OutLeft
<div id="myModal1" class="modal animated fadeOutLeft" data-easein="fadeInLeft" data-easeout="fadeOutLeft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Modal header 1</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
shake
<div id="myModal22" class="modal animated rollOut" data-easein="shake" data-easeout="rollOut" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Modal header</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</body>
</html>
Please find my code snippet in below link
JSFiddle
I appreciate your help.
I use the following javascript (jquery) extension of the bootstrap modal library to apply effects from animate.css to the modal show/hide events:
https://gist.github.com/jduhls/92f2c7fae92da3a95c5941024847ae87
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/jduhls/92f2c7fae92da3a95c5941024847ae87/raw/d17e48713892332af0b2afb55d34331608c46759/bootstrap-modal-animate-css.js"></script>
<div id="modal" class="modal animated" data-animate-css-hide="rollOut" data-animate-css-show="rollIn">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title"></div>
</div>
<div class="modal-body">Hello world!</div>
<div class="modal-footer">
<button type="button" class="btn btn-lg btn-default modal-submit" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<p> </p>
<p><button class="btn btn-primary animated swing center-block" data-toggle="modal" data-target="#modal">Open Modal</button></p>
<p> </p>
<script src="https://gist.github.com/jduhls/92f2c7fae92da3a95c5941024847ae87.js"></script>
just simply add this class animated plus the transition you want.
for example: class="animated zoomIn"
put this code below, something like this.
<div class="modal animated zoomIn" tabindex="-1" role="dialog" aria-hidden="true">
then let's the animate begin!
Related
I am trying to autofocus input element on bootstrap 4 modal open . I have tried below code from http://getbootstrap.com/docs/4.0/components/modal/ but this is not working.
Can someone help me to give working demo
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
Try the snippet below. Perhaps you need $(document).ready()
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
<input type="text" class="form-control" id="myInput">
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
I am also use this code
<script>
function setFocus(){
$('#searchModal').on('shown.bs.modal', function () {
$('#q').focus();
});
}
</script>
Where #searchModal is modal div ID and #q is input element ID
Use this code in button
<button type="button" onclick="setFocus()">Open Modal</button>
I'm trying to add scrollbar to bootstrap modal body. But it add to entire content.How to add it to only to body.was using modals which had long content, and the modals automatically scrolled when a given max height was reached.
This is my code
<head>
<!-- Bootstrap CSS-->
<link href="/<s:text name="app.name"/>/css/bootstrap.min.css" rel="stylesheet" type="text/css">
.modal-body {
max-height: calc(100vh - 212px);
overflow-y: auto;
}
</head>
<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">
<s:text name="roles"/>
</button>
</s:if>
</div>
<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:80%; margin-top: 60px; margin-bottom:30px;">
<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"><s:text name="headingRoles"/></h4>
</div>
<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>
it doesn't work as expected. The modal window does reach a maximum size, but it just cuts its content there and the footer is not even displayed.Answers are welcome
Thank you
Just provide overflow hidden to the .modal class and provide overflow scroll to the modal body...
.modal .modal-content{
overflow:hidden;
}
.modal-body{
overflow-y:scroll; // to get scrollbar only for y axis
}
Hope it will help you :)
<head>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body,html{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
.modal-dialog{
height:calc(100% - 60px);
}
.modal-content{
height:100%;
}
.modal-header{
height:50px;
}
.model-footer{
height:75px;
}
.modal-body {
height:calc(100% - 125px);
overflow-y: scroll; /*give auto it will take based in content */
}
</style>
</head>
<body>
<div>
<s:if test="user.level == 0 && name != ''">
<button id="roleBtn" class="btn btn-info" type="button" onclick=""
data-toggle="modal" data-target="#roleModal">Open model
<s:text name="roles"/>
</button>
</s:if>
</div>
<div class="modal" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="">
<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"><s:text name="headingRoles"/></h4>
</div>
<s:form theme="simple" method="post" action="UserSupport">
<div class="modal-body">
<div class="container-fluid">
<s:hidden name="docType" value="userLevel"/>
<div>
<s:hidden name="name"/>
<s:iterator value="userRoles" status="rowstatus">
<s:hidden name="userRoles[%{#rowstatus.index}].role" value="%{role}"/>
<div class="form-group col-xs-12">
<div class="col-xs-4"></div>
<div class="col-xs-8" align="left">
<div class="checkbox">
<label></label><s:checkbox name="userRoles[%{#rowstatus.index}].selected"
value="name != ''"/> <s:property
value="roleName"/></label>
</div>
</div>
</div>
</s:iterator>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-body" align="center">
<s:submit method="saveRoles" cssClass="btn btn-primary"
value="%{getText('save')}"></s:submit>
<button type="button" method="resetRoles" class="btn btn-default" data-dismiss="modal">
<s:text name="close"/>
</button>
</div>
</div>
</s:form>
</div>
</div>
</div>
</body>
https://getbootstrap.com/docs/4.5/components/modal/#exampleModalLongTitle
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
If you use Bootstrap, dont add some CSS, just use class "overflow-hidden" on the div with modal-content class.
How does one open a modal from a Bootstrap popover? I'm having trouble with that. My sample code is below. Clicking on the button in the popover does not open the modal. Calling the modal from any other place on the page launches the modal.
I am using the following function for the popover:
$( function() {
$("[data-toggle=popover]").popover( {
html : true,
content : function() {
return $('#popover-content').html();
}
});
});
and here's the relevant HTML for my page:
<li>
<a data-toggle="popover" data-container="body" data-placement="left"
type="button" data-html="true" href="#" id="login">
<i class="zmdi zmdi-account-circle zmdi-hc-lg zmdi-hc-fw"
style="color:white; padding-top:10px;padding-right:32px">
</i>
</a>
</li>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right" style="background-color:#00c853;color:#fff; margin-top:0px" onclick="$('#changeProfileModal').modal()"> </button>
</div>
</div>
</div>
</div>
Thanks in advance for assisting me with this.
You might need to bind the click of the button (which is hidden) via the document.
See sample code below (adjust colours, sizes, etc to your liking)
$(function() {
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on('click', "#button2", function() {
$('#changeProfileModal').modal('show');
});
});
#button2 {
background-color: #00c853;
color: #fff;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul>
<li>
<a data-toggle="popover" data-container="body" data-placement="right" type="button" data-html="true" href="#" id="login">
popover
</a>
</li>
</ul>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" id="button2" class="btn pull-right">btn2</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="changeProfileModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
I'm using bootstrap to design my page. However, I got an issue when trying to close the modal. It simply doesn't close. Normally the tag data-dismiss="modal" should do the work according to the tutorial. So, what's the problem here?
Here is the code for the modal:
<!--Dialog referred as by it id -->
<div class="modal fade" id="contact" role="dialog" 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>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src = "js/bootstrap.js"></script>
<script src="js/basic.js"></script>
I have tested your code, working fine in my side.
Demo.
http://jsfiddle.net/68e4y/
<!--Dialog referred as by it id -->
<div class="modal fade" id="contact" role="dialog" 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>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#contact">
Launch demo modal
</button>
I want to open multiple dialogs using Twitter Bootstrap 3.
How can I do it? Can it be done at all?
First create some modals which you want like this.
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Then from your dynamic link switch to your modal using id to link href. Otherwise use onclick javascript event.
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
Or (the following option is better for you)
Launch Modal
And from javascript,
<script>
function launch_modal(id) {
// Hide all modals using class if required.
$('.modal').modal('hide');
$('#'+id).modal('show');
}
</script>
another way is to have one this html:
<div class="modal fade" id="modal" 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" title="Close">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And many jquery like this to add content:
$('#modal .modal-header .modal-title').html('<strong>:)</strong> Success!');
$('#modal .modal-body').html('<p>Something success!.</p>');
$('#modal .modal-footer').html('<button type="button" class="btn btn-default" data-dismiss="modal" title="Close">Close</button>');
$('#modal').modal('show');