Question

我正在尝试在单击按钮添加的按钮时显示模态：

$(document).ready(function(){
    $('#rent-php').on('click', '.bike-rent-btn', function(){
        $('#confirm-rent-modal').modal('show');
    });
});

通过php添加dinamically的按钮看起来像这样：

<button type="button" class="btn btn-primary btn-md bike-rent-btn" data-toggle="modal" data-target="#confirm-rent-modal">Rent</button>

这是html代码，几乎是从w3粘贴的副本：

<div class="modal fade modal-sm" id="confirm-rent-modal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

</div>         
</div>

此外，还有一些容器流体的自定义样式：

height: 100vh;
margin: 0;
padding: 30px;
background-color: #EEEEEE;

当此代码放在container-fluid bootsrap div中时，没有任何反应。当我把它放在它之外（在body标签中）时，模态显示，但随后消失。但至少会发生一些事情。

Answer 1

对我有用吗？如果我遗失了某些东西，请告诉我。

这可能是您的依赖项版本的问题吗？

$(document).ready(function(){
    $('#rent-php').on('click', '.bike-rent-btn', function(){
        $('#confirm-rent-modal').modal('show');
    });
});

.container-fluid{
    height: 100vh;
    margin: 0;
    padding: 30px;
    background-color: #EEEEEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="container-fluid">
    <button type="button" class="btn btn-primary btn-md bike-rent-btn" data-toggle="modal" data-target="#confirm-rent-modal">Rent</button>

    <div class="modal fade modal-sm" id="confirm-rent-modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                   <h4 class="modal-title"></h4>
              </div>
              <div class="modal-body">
                  <p></p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
          </div>
        </div>         
    </div>
</div>

当置于容器 - 液体中时，Bootstrap模态不起作用

1 个答案: