Question

单击按钮并且弹出窗口不显示时出现问题。我的代码如下所示。请帮助我找到解决方案。预先感谢！

Css

body {
  background: black;
}

p {
  color: #fff;
}

.container {
  background: darkblue;
  position: absolute;
  max-width: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  padding: 15px;
}
.container label {
  color: #fff;
}

.popover-body .btn-primary {
  background: #0019b2;
  color: #ffe000 !important;
  border: none;
}
.popover-body .btn-primary:hover {
  background: #ffe000;
  color: #0019b2 !important;
}
.popover-body .btn-primary:hover .fas {
  color: #0019b2;
}
.popover-body .btn-primary:active {
  background: #0019b2;
}
.popover-body .number-spinner .fas {
  color: #ffe000;
}

HTML

<body>
  <div class="container">
    <p>Bootstrap 4 Popover - Persons Input Field</p>
    <label for="pax"><i class="fas fa-users"></i> Persons</label>
    <span class="trigger">
      <input type="text" name="pax" id="pax" class="form-control" data-adults="1" data-children="0" data-total="1" placeholder="Total: 1 • Adults: 1 • Children: 0" disabled>
    </span>
    <div class="popover-content d-none">
      <div class="form-group">
        <label for="adult"><i class="fas fa-male"></i> Adults <i>(Age: 18+)</i></label>
        <div class="input-group number-spinner">
          <a class="btn btn-primary" data-dir="dwn"><i class="fas fa-minus"></i></a>
          <input type="text" name="adult" id="adult" class="form-control text-center" value="1" max="9" min="1" disabled>
          <a class="btn btn-primary" data-dir="up"><i class="fas fa-plus"></i></a>
        </div>
      </div>
      <div class="form-group">
        <div class="form-group">
        <label for="child"><i class="fas fa-child"></i> Children <i>(Age: 12-17)</i></label>
          <div class="input-group number-spinner">
            <a class="btn btn-primary" data-dir="dwn"><i class="fas fa-minus"></i></a>
            <input type="text" name="child" id="child" class="form-control text-center" value="0" max="9" min="0" disabled>
            <a class="btn btn-primary" data-dir="up"><i class="fas fa-plus"></i></a>
          </div>
        </div>
      </div>
      <a class="btn btn-primary btn-block dismiss">Save</a>
    </div>    
  </div>
</body>

JavaScript

var options = {
  content: function() {
    return $(this).parent().find('.popover-content').html();
  },
  html: true,
  placement: 'bottom',
};
var $popover = $('.container>.trigger').popover(options);

// Open Popover
var pax = [1,0];
$('.container>.trigger').click(function(e) {
  e.stopPropagation();
  $('.popover-body input').each(function(i) {
    $(this).val(pax[i]);
  });
});

// Close Popover
$(document).click(function(e) {
  if($(e.target).hasClass('dismiss')) {
    $('.container>.trigger').popover('hide');
  }
});

// On Close Store Values
$popover.on('hide.bs.popover', function(e) {
  $('.popover-body input').each(function(i) {
    pax[i] = $(this).val();
  });
});

// Change Values on + & - Button Clicks
$(document).on('click', '.number-spinner a', function() {
  var btn = $(this),
      input = btn.closest('.number-spinner').find('input'),
      oldValue = input.val().trim(),
      inputPax = $('#pax'),
      dataTotal = parseInt(inputPax.attr('data-total')),
      dataAdults = parseInt(inputPax.attr('data-adults')),
      dataChildren = parseInt(inputPax.attr('data-children'));

  if(btn.attr('data-dir') == 'up') {
    if(oldValue < input.attr('max')) {
      oldValue++;

      if(input.attr('id') === 'adult') {
        dataAdults++
        inputPax.attr('data-adults', dataAdults);
        console.log('Adult added! The new adult total is: ' + dataAdults);
      } else if(input.attr('id') === 'child') {
        dataChildren++
        inputPax.attr('data-children', dataChildren);
        console.log('Child added! The new child total is: ' + dataChildren);
      }
    }
  } else {
    if(oldValue > input.attr('min')) {
      oldValue--;

      if(input.attr('id') === 'adult') {
        dataAdults--
        inputPax.attr('data-adults', dataAdults);
        console.log('Adult added! The new adult total is: ' + dataAdults);
      } else if(input.attr('id') === 'child') {
        dataChildren--
        inputPax.attr('data-children', dataChildren);
        console.log('Child added! The new child total is: ' + dataChildren);
      }
    }
  }
  dataTotal = dataAdults + dataChildren;
  inputPax.attr('data-total', dataTotal);
  inputPax.attr('placeholder', 'Total: ' + dataTotal + ' • Adults: ' + dataAdults + ' • Children: ' + dataChildren);

  input.val(oldValue);
});

// Show Popover On Startup
$('.container>.trigger').popover('show')

但是它没有出现。

我试图在我的index.html中也包含引导程序和其他依赖项，但弹出窗口没有显示。

请帮助我完成这个项目。

Answer 1

您是从Bootstrap嵌入CSS和JS吗？我正在使用您的代码创建一个项目，如果单击输入，则会显示弹出窗口。看一下Bootstrap中的“入门模板” https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template

Bootstrap 4 Popover-人员输入字段（不显示Popover）

1 个答案: