引导响应确认

时间:2015-07-10 05:40:08

标签: javascript html twitter-bootstrap responsive-design

enter image description here

HTML

<a class="btn" data-toggle="confirmation-popout" data-placement="bottom" data-original-title="" title="">Confirmation on bottom</a>`

script

`$('#example').confirmation()

如图所示,它没有响应。我希望它与确认按钮一起响应

问题是当我点击底部按钮上的确认时。弹出确认信息。因此,当我调整窗口大小时,确认框被修复为没有响应。

请检查为测试响应性而提供的链接。

你可以帮我解决这个Link

1 个答案:

答案 0 :(得分:0)

您只需在窗口调整大小时刷新确认(&#39;显示&#39;)。

$(window).resize(function() {
  $('a + .popover').prev().confirmation('show');
});

这是工作代码示例。全屏运行代码段并调整窗口大小。

&#13;
&#13;
$(function() {

  $('[data-toggle="confirmation"]').confirmation();
  
  $(window).resize(function() {
    $('a + .popover').prev().confirmation('show');
  });

});
&#13;
<link rel="stylesheet" href="http://ethaizone.github.io/Bootstrap-Confirmation/assets/css/bootstrap.css">

<link rel="stylesheet" href="http://ethaizone.github.io/Bootstrap-Confirmation/assets/css/bootstrap-responsive.css">

<link rel="stylesheet" href="http://ethaizone.github.io/Bootstrap-Confirmation/assets/css/docs.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ethaizone.github.io/Bootstrap-Confirmation/assets/js/bootstrap-tooltip.js"></script>

<script src="http://ethaizone.github.io/Bootstrap-Confirmation/bootstrap-confirmation.js"></script>

<div class="container">

  <div class="bs-docs-example tooltip-demo">
    <ul class="bs-docs-tooltip-examples">
      <li><a class="btn" data-toggle="confirmation" data-placement="left" data-original-title="" title="">Confirmation on left</a>
      </li>
      <li><a class="btn" data-toggle="confirmation" data-placement="top" data-original-title="" title="">Confirmation on top</a>
      </li>
      <li><a class="btn" data-toggle="confirmation" data-placement="bottom" data-original-title="" title="">Confirmation on bottom</a>
      </li>
      <li><a class="btn" data-toggle="confirmation" data-placement="right" data-original-title="" title="">Confirmation on right</a>
      </li>
    </ul>
  </div>

</div>
&#13;
&#13;
&#13;