Modal没有显示使用bootstrap

时间:2015-10-14 07:11:25

标签: jquery twitter-bootstrap bootstrap-modal

每当我按下按钮时,模态就不会显示出来,我尝试了很多东西,甚至创建了一个custom.js来将此代码放入

$('#myModal').modal('show');

但它不起作用,我哪里做错了?

这是代码

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <!-- Button -->
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Get Started</button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:4)

问题是引导程序obj = http.request( uri='https://www.googleapis.com/gmail/v1/users/me/drafts', method='POST', body={ 'message': { 'raw':base64.urlsafe_b64encode( message.as_string() ) } }, headers={'content-type':'application/json'} ) 不完全支持jQuery 3.0.0-alpha1版本

原因模式未显示

  • 按模式触发按钮使用默认引导行为或
  • 使用jQuery 3.3.5
  • 打开模态

是因为$("#myModal").modal("show")属性.modal未更改为display:none

Fiddle

<强>解决方案-1

切换回jQuery的最后一个稳定版本display:block

解决方案-2使用jQuery jQuery 2.x

使用bootstrap模态event侦听器,并在显示模式时将3.0.0-alpha1属性从.modal更改为display:none

如果使用按钮触发模态

diaply:block

Fiddle

如果使用jQuery打开模态

$(document).ready(function () {
    $("#myModal").on('shown.bs.modal', function () {
        $(".modal").css('display', 'block');
    })
});

Fiddle

相关问题