Bootstrap 模式隐藏不起作用 [英] Bootstrap modal hide is not working

查看：39
本文介绍了Bootstrap 模式隐藏不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

引导模式隐藏不起作用.警报进来了.但我的模态没有隐藏 添加了 bootply.我的问题也是一样.

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style="text-decoration:none;"type="button">查看并确认</button><div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true"><div class="modal-bootstrap-dialog modal-sm"><div class="modal-bootstrap-content"><div class="modal-bootstrap-body">-  内容  -  -

<div class="modal-bootstrap-footer"><button type="submit" class="button primary" data-dismiss="modal">关闭</button><button type="submit" class="button primary">保存更改</button>

<script type="text/javascript">$("#buy").click(function () {变量 a = 4;如果 (a == 5) {警报(如果")；$('#myModal').modal('show');}别的 {警报(其他")；$('#myModal').modal('隐藏');}});

bootply

解决方案

您正在使用两种模式切换方法:通过 Javascript 和通过数据属性.因此，您的点击正在触发模式显示作为您的数据属性设置，并且您的 Javascript 不会影响此触发器.

只需删除数据属性并使用 Javascript 方法:

Bootstrap modal hide is not working. Alert comes in else. but my modal is not hidden Added bootply. My issue is the same one.

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>



<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

bootply

解决方案

You are using both modal toggling methods: via Javascript and via data attributes. So your click is firing the modal show as your data attributes set, and your Javascript does not affect this trigger.

Just remove the data attributes and go with the Javascript method:

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>

这篇关于Bootstrap 模式隐藏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆