i am trying to show jquery datetimepicker into a bootstrap modal..
HTML:
<div class="modal fade" id="availability_modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">View availability of %SUPP_NAME%</h4>
</div>
<div class="modal-body">
<div id="availability_calender"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
and the jquery i used is...
$(document).on("click","#open_availability",function(e){
setTimeout(function(){
jQuery('#availability_calender').datetimepicker({
formatDate: "d.m.Y",
inline:true,
timepicker:false,
highlightedDates: [
"29.02.2016,Meeting with Pete",
"24.02.2016,Christmas Eve,xdsoft_highlighted_mint",
"25.02.2016,Christmas Day,xdsoft_highlighted_mint",
"26.02.2016,Thanksgiving"
],
highlightedPeriods: [
"27.04.2015,08.05.2015,Business trip",
"11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint",
"21.12.2015,01.01.2016,Christmas holiday 2015"
]
});
},1000);
});
it works fine when i am not rendering into a modal...
any help is appreciated
I am not sure why do you want a div element to initialize a datetimepicker, but i would suggest you to change that element to a form input with same id.
There is a callback, when modal shows up in the browser which is shown.bs.modal and you can initialize the datetimepicker in it:
jQuery('#availability_modal').on('shown.bs.modal', function() {
jQuery('#availability_calender').datetimepicker({
formatDate: "d.m.Y",
inline: true,
timepicker: false,
highlightedDates: [
"29.02.2016,Meeting with Pete",
"24.02.2016,Christmas Eve,xdsoft_highlighted_mint",
"25.02.2016,Christmas Day,xdsoft_highlighted_mint",
"26.02.2016,Thanksgiving"
],
highlightedPeriods: [
"27.04.2015,08.05.2015,Business trip",
"11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint",
"21.12.2015,01.01.2016,Christmas holiday 2015"
]
});
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.css">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script>
Date.parseDate = function(input, format) {
return moment(input, format).toDate();
};
Date.prototype.dateFormat = function(format) {
return moment(this).format(format);
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#availability_modal">
Launch demo modal
</button>
<div class="modal fade" id="availability_modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">View availability of %SUPP_NAME%</h4>
</div>
<div class="modal-body">
<div id="availability_calender"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
It's not clear what your problem is. Does the modal show? Or is it just the datetimepicker that doesn't work?
Try adding this before the setTimeout Call
$('#availability_modal').modal('show');
Also you wont need the setTimeout call if your #availability_calender div is already in the dom
You must initialize event after $('#availability_modal').modal('show'); as #availability_calender is not present in the DOM when you are initializing the datetimepicker
Edit: #availability_calender should be input element not div element.
Try this:
$('#btn').on('click', function() {
$('#availability_modal').modal('show');
jQuery('#availability_calender').datetimepicker({
formatDate: "d.m.Y",
inline: true,
timepicker: false,
highlightedDates: [
"29.02.2016,Meeting with Pete",
"24.02.2016,Christmas Eve,xdsoft_highlighted_mint",
"25.02.2016,Christmas Day,xdsoft_highlighted_mint",
"26.02.2016,Thanksgiving"
],
highlightedPeriods: [
"27.04.2015,08.05.2015,Business trip",
"11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint",
"21.12.2015,01.01.2016,Christmas holiday 2015"
]
});
0
})
<div class="modal fade" id="availability_modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">View availability of %SUPP_NAME%</h4>
</div>
<div class="modal-body">
<input id="availability_calender">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<button id='btn'>Open</button>
Fiddle here
Related
I have bootstrap modal which is not hidden. I mean there is no fade class which is generally seen as <div class="modal fade" role="dialog">. I want to show modal as popup when user clicks on button. The code below does not work as it is unable to detect it as modal.
JS
$(function(){
$('.custom-modal').click(function(e){
e.preventDefault();
var mymodal = $('#myModal');
mymodal.modal('show');
});
})
HTML
<button class="btn btn-primary btn-lg custom-modal">Open Modal</button>
<div id="myModal">
<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">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Can you please check the below code? Hope it will work for you. You just need to add class="modal fade" with id="myModal" and it will work perfectly.
Please refer to this link: https://jsfiddle.net/yudizsolutions/2qfeagc5/
$(function() {
$('.custom-modal').click(function(e) {
e.preventDefault();
var mymodal = $('#myModal');
mymodal.modal('show');
});
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<button class="btn btn-primary btn-lg custom-modal">Open Modal</button>
<div id="myModal" class="modal fade">
<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">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want to display modal on button click. I've followed bootstrap documentation, but for some reason the modal isn't popping up.Here is my code:
Modal:
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal"> View Details</button>
Jquery:
$(document).ready(function(){
$('button.btn-view-details').on('click', function () {
$('#commonModal').modal('show');
})
})
On your button, you can add data-target attribute and you don't need to trigger the popup via jQuery:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal" data-target="#commonModal"> View Details</button>
You need to add just bootstrap cdns
$(document).ready(function() {
$('button.btn-view-details').on('click', function() {
$('#commonModal').modal('show');
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details" data-toggle="modal"> View Details</button>
My modal ID is #modal1 for example.
Appears normally with a button function.
Check this out it might help you.
$(document).ready(function(){
$("#myBtn").click(function(){
setTimeout( function(){ $('#modal1').modal('show'); } , 1000 );
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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>
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
i used example from bootstrap to create modal but nothing happens?!
On button click, nothing...
script src of bootstrap is under jquery src ?
And this example.
Have a nice day.
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- 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">
...
</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>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#myModal").modal();
});
</script>
</html>
I am a beginner in programming i'm stuck with a problem..my modal is not working the modal is displaying in the page not in the popup..I desperately need the solution..it would be great if someone can help me get out of this problem.Here is my code snippet..
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>`enter code here`
<h4 class="modal-title">M Saifur Rahman,PMP</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And I am putting the links and scripts here..
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Change the position of the jquery importing in your html page,that is import jquery first then the bootstrap js because Bootstrapjs require jquery to run.
<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>
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">M Saifur Rahman,PMP</h4>
</div>
<div class="modal-body">
<p>Here goes the body content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Just place the https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js before https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js. you You should load jquery first because bootstrap use jquery features.
Saif,
U have to define java script for opening the modal. For ex: if u want to open modal on button click then u will define commands to open on button
$('#online_exam').click(function(){
$("#myModal").modal('show');
})