我正在用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>

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

我很感激你的帮助。

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


当前回答

我在移动设备上测试时也遇到过同样的问题,这个技巧对我来说很管用

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

将按钮更改为锚定标签应该可以工作,问题是由于它的类型按钮,因为它试图提交,所以模式立即消失。并且也从模态中移除隐藏隐藏淡出给予 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labledby ="myModalLabel" aria-hidden="true"> 希望这对你有用。

其他回答

我也有这个问题,如果按钮是在一个标签内,然后模态出现一次,很快就消失了,把按钮从形式固定的问题。谢谢我在这个帖子结束!+1到所有。

如果使用jquery两次附加事件监听器,也会出现这个问题。 例如,你可以在不解除绑定的情况下设置:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

如果发生这种情况,事件将连续触发两次,模态将消失。

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

参见示例:http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

在使用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');"

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

我在移动设备上测试时也遇到过同样的问题,这个技巧对我来说很管用

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

将按钮更改为锚定标签应该可以工作,问题是由于它的类型按钮,因为它试图提交,所以模式立即消失。并且也从模态中移除隐藏隐藏淡出给予 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labledby ="myModalLabel" aria-hidden="true"> 希望这对你有用。