<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="popover-markup"> <div class="trigger form-group form-group-lg form-group-icon-left"><i class="fa fa-users input-icon input-icon-highlight"></i> <button class="btn btn-danger btn-lg btn-block" onclick="document.getElementById('hidf').style.display='block'"> ban </button> <input type="hidden" name="days" id="days" class="form-control" value="1"> </div> <div class="content hide" id="hidf"> <div class="form-group"> <label class="control-label col-md-5"><strong>Days</strong><br> <i> (from now)</i></label> <div class="input-group number-spinner col-md-7"> <span class="input-group-btn"> <a class="btn btn-danger" data-dir="dwn"> <span class="glyphicon glyphicon-minus"></span> </a> </span> <input type="text" disabled name="day" id="day" class="form-control text-center" value="1" max=100 min=1> <span class="input-group-btn"> <a class="btn btn-info" data-dir="up"> <span class="glyphicon glyphicon-plus"></span> </a> </span> </div> </div> <button type="submit" class="btn btn-danger btn-block demise">Ban</button> </div> </div>

.popover-markup .popover{ width:150%; } .popover-markup label{ padding:0px; } .container{ margin:0px auto; }

$(function () { var $popover = $('.popover-markup>.trigger').popover({ html: true, placement: 'bottom', // title: '<?= lang("Select days");?><a class="close demise");">×</a>', content: function () { return $(this).parent().find('.content').html(); } }); // open popover & inital value in form var days = [1,0,0]; $('.popover-markup>.trigger').click(function (e) { e.stopPropagation(); $(".popover-content input").each(function(i) { $(this).val(days[i]); }); }); // // close popover $(document).click(function (e) { if ($(e.target).is('.demise')) { $('.popover-markup>.trigger').popover('hide'); } }); // store form value when popover closed $popover.on('hide.bs.popover', function () { $(".popover-content input").each(function(i) { days[i] = $(this).val(); }); }); // spinner(+-btn to change value) & total to parent input $(document).on('click', '.number-spinner a', function () { var btn = $(this), input = btn.closest('.number-spinner').find('input'), total = $('#days').val(), oldValue = input.val().trim(); if (btn.attr('data-dir') == 'up') { if(oldValue < input.attr('max')){ oldValue++; total++; } } else { if (oldValue > input.attr('min')) { oldValue--; total--; } } $('#days').val(total); input.val(oldValue); }); $(".popover-markup>.trigger").popover('hide'); });