logo标签列表

Bootstrap模态框隐藏无效

javascriptjquerytwitter-bootstraptwitter-bootstrap-3
51

Bootstrap模态框隐藏不起作用。 否则会有警告弹出，但我的模态框没有隐藏 添加了bootply。 我的问题与那个相同。


<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

检查控制台是否有任何错误。如果有，请在此处发布。 - shyammakwana.me
1
你在 alert() 后面忘记加上 ; 了。 - shyammakwana.me
1
你的 JavaScript 代码只是嵌在 HTML 中的。 - Luke
1
你的 <script> 标签在哪里？ - shyammakwana.me
1
我检查了你的代码。现在你比较 a == 5。但是 a 总是 4。你可能需要检查一下为什么要进行这个比较。 另外，如果你想从 Javascript 打开模态框，需要删除 data-target：<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>data-target 直接打开模态框。请检查是否有效。 - Kshitiz
显示剩余4条评论
29个回答
1
1
  1. 删除 fade 类。
  2. 创建关闭模态框的函数
    3. function stopLoading() {
   $("#loadingModal").modal("hide");
}
  3. 在关闭模态框时添加延迟（1000 = 1秒）
    4. setTimeout(stopLoading, 1000)

适用于 Bootstrap 4 和 Admin LTE 3。

1
在 JavaScript 代码中，您需要添加一行代码。
$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
1

使用Bootstrap隐藏模态对话框

方法1：使用Bootstrap

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

方法二：使用 stop-propagation
$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});

方法3：显示方法调用后
$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

方法四：使用CSS
this.display='block'; //Set block css
this.display='none'; //set none css after close dialog
0

在我的经验中，有时您需要删除显示样式：

style="display: block;"
0
    G.modals = [];
    /**
     * 
     * @param {
     *  modalId: string,
     *  callback: function
     * } options 
     * @returns 
     */
    const openModal = (options) => {
      const {
        modalId = false,
        callback = () => { }
      } = options;
      if (!modalId) return;
    
      const modalNode = document.querySelector(`#${modalId}`);
      modal = new bootstrap.Modal(modalNode);
      modal.show();
    
      const modalObject = {
        modal,
        id: modalId
      };
    
      G.modals.push(modalObject);
    
      callback();
    };
    
    /**
     * 
     * @param {
     *  modalId: string,
     *  callback: function
     * } options 
     * @returns 
     */
    const closeModal = (options) => {
      const {
        modalId = false,
        callback = () => { }
      } = options;
      if (!modalId) return;
    
      const currentModal = G.modals.find(item => item.id === modalId)  || false;
      if(!currentModal) return;
      const { modal } = currentModal;
      const { _element, _backdrop } = modal;
    
      _element.classList.remove('show');
      _backdrop._element.remove();
      G.modals.splice(G.modals.indexOf(currentModal), 1);
    
      callback();
    };
    
    
          openModal({
            modalId: 'your-modal-id',
            callback: () => {
              DoSomethingAfterModalOpened();
            }
          });
    
          closeModal({
            modalId: 'your-modal-id',
            callback: () => {
              DoSomethingAfterModalClosed();
            }
          });
考虑添加支持信息来支持您的答案。 - Ethan McTague
0

试试这个

给关闭按钮加一个ID

<button type="submit" id="modalcloseBtn" class="button primary" data-dismiss="modal" >Close</button>

并触发onclick事件

$('#modalcloseBtn').trigger("click");
0
let btnSaveChanges = document.getElementById("btnSaveChanges")

btnSaveChanges.onclick = function () {
    hideModal()
}

function hideModal() {
    // Get the modal element
    var modalElement = document.getElementById('updateModal');

    // Create a Bootstrap modal instance
    var modal = bootstrap.Modal.getInstance(modalElement);

    // Hide the modal
    modal.hide();
}
0

我也遇到了同样的问题，但没有使用“fade”之类的东西。 我只是用js打开和关闭模态框，当在setTimeout内调用隐藏函数时才起作用。

<script>
var modal_show = function(){
    $("#modal_post").modal("show");
};

var modal_hide = function(){
    $("#modal_post").modal("hide");
};

window.addEventListener("message", function(event){ 
   // listening iframe post message
   modal_hide();
});
</script>

<div class="modal" id="modal_post" tabindex="-1" role="dialog" style="width: 100%;" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog" style="width: 450px; height:600px; background: white; border: none; box-shadow: none;" role="document">
    <div class="modal-content"  style="width: 100%; background: white; border: none; box-shadow: none;">
      
      <div class="modal-body" style="width: 100%; background: white; border: none; box-shadow: none; padding: 0;">
        <div>
            <iframe src="https://perdu.com" style="width:450px;height:600px;"></iframe>
        </div>
      </div>
      
    </div>
  </div>
</div>

毫无理由，modal_hide (); 在控制台中可以工作但在我的代码中不起作用。

如果我在事件监听器中用 setTimeout (modal_hide, 200); 替换 modal_hide ();，它会正常工作。

0

可能的原因之一是jquery和bootstrap的顺序与您的脚本不正确。 应按以下顺序排列。

1. <script src='js/jquery-3.2.1.min.js'></script>
2. <script src='js/bootstrap.min.js'></script>
3. your own script:
<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接