Bootstrap Modal立即消失

我正在用bootstrap做一个网站。

基本上，我想在主页中使用一个模态，通过Hero Unit中的按钮来调用。

按钮代码:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

模态代码:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

问题是，只要我点击按钮，模态就会淡入，然后立即消失。

我很感激你的帮助。

此外，如何改变下拉三角形的颜色(指向向上，没有悬停)?我正在做一个基于橙色和棕色的网站，那个蓝色的东西真的很烦人。

当前回答

我在asp.NET项目中遇到了同样的问题。我使用bootstrap 3.1.0解决了它降级到bootstrap 2.3.2。

2014-05-19 01:20:36

其他回答

我有同样的问题，因为我切换了我的模式两次，如下所示:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

我删除了一个出现项:

(“# myErrorModal美元)。“充气”(资本)

它像魔法一样起作用!

2020-02-25 08:28:46

我的代码莫名其妙地包含了bootstrap.min.js两次。我移除了其中一个，现在一切都很好。

2015-06-18 07:24:54

我也有同样的问题，但原因不同。我按照文档创建了一个按钮，如下所示:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

当我点击它时，似乎什么也不会发生。但是，该按钮位于<form>中，它暂时只是获取相同的页面。

我通过在button元素中添加type="button"来解决这个问题，这样当点击时它就不会提交表单了。

2014-09-11 11:42:39

我也有同样的问题，但对我来说，这是因为我在模式表单中有一个类型为“提交”的按钮。我改变了

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

这就解决了失踪问题。

2016-05-16 22:50:38

在使用Angular(5)时，我也遇到了同样的问题，但在我的案例中，我是这样解决的:

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

注意:需要在ts文件中导入jquery作为“declare var $:any;”

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

我做的改动:

删除"data-toggle="modal"从按钮标签(感谢@miCRoSCoPiC_eaRthLinG这个答案帮助我这里)在我的情况下，它显示模式，所以我创建(点击)="showresult()" 内部组件。ts需要声明Jquery($)和内部按钮点击方法showresult()调用" $('#myModal').modal('show');"

2018-08-29 09:47:42

Bootstrap Modal立即消失

推荐文章

最新文章

标签