Bootstrap Popover w/ inputs
Bootstrap Popover w/ inputs
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.js"></script>
<button class="btn" type="button" id="primaryTravelersBtn" data-toggle="popover" data-placement="bottom" title=""><i class=" icon-user"></i></button>
<!-- User Count -->
<div id="primaryTravelers" style="display:none">
<label>Room 1
<button class="minus btn-small btn btn-inverse"><i class="icon-minus icon-white"></i></button>
<span id="roomcount" class='label'>2</span>
<button class="plus btn-small btn btn-inverse"><i class="icon-plus icon-white"></i></button>
</label>
</div>
<!-- end dates dd -->
CSS
body{margin:40px 80px 0px 180px}
.popover-inner{width:170px}
JavaScript
/*----------------------------
Primary Traveler numbers dropdown
------------------------*/
var isVisible = false;
var clickedAway = false;
$('#primaryTravelersBtn').popover({
html: true,
trigger: 'manual',
content: function () {
return $('#primaryTravelers').html();
}
}).click(function (e) {
$(this).popover('show');
// triggerDatePicker(); // This makes the datepicker operational on Click
clickedAway = false
isVisible = true
e.preventDefault()
$('.popover').bind('click', function () {
clickedAway = false
//alert('popover has been clicked!');
});
});
$(document).click(function (e) {
if (isVisible && clickedAway) {
$('#primaryTravelersBtn').popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
}
}); // end popover
$('body').on('click touchstart', 'button.plus', function (e) {
var sp = parseFloat($(this).prev('span').text());
if (!isNaN(sp) && sp < 15) {
$(this).prev('span').text(sp + 1);
localStorage.removeItem("ppl"); // used on grey bar totals
localStorage.setItem('ppl', sp + 1);// used on grey bar totals
}
e.preventDefault(); // HERE
});
// less
$('body').on('click touchstart', 'button.minus', function (e) {
var sp = parseFloat($(this).next('span').text());
$(this).next('span').text(sp - 1);
if (!isNaN(sp) && sp > 1) {
$(this).next('span').text(sp - 1);
localStorage.removeItem("ppl"); // used on grey bar totals
...