如何关闭 Bootstrap 4 带轮播的 X 上的弹出窗口

Question

我试图在有人单击 X 图标时关闭 Bootstrap 4 弹出窗口。

如果我删除代码 'data-backdrop="static" ，每当我点击模式之外的任何地方时，它都会关闭弹出窗口。然而，这是行不通的，因为每次有人试图点击轮播的下一个图标时，它都会自动关闭弹出窗口。我只希望当有人只单击 X 图标时弹出窗口关闭。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="myModal" class="modal fade in" role="dialog" data-backdrop="static">
  <div class="modal-dialog">
    <button type="button" class="close" data-dismiss="myModal">&times;</button>

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="../images/placeimg_550_250_grayscale_any.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://placeimg.com/550/250/any" alt="Second slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>


<script type="text/javascript">
  $(window).on('load', function() {
    $('#myModal').modal('show');
  });
</script>

Answer 1

将此代码添加到您的脚本标记中：

$('#myModal').find(".close").click(function() {
      $('#myModal').modal("hide");
});

所以你的代码应该是这样的：

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
    $('#myModal').find(".close").on("click", function() {
        $('#myModal').modal("hide");
    });
</script>

Answer 2

您应该link到适当的CSS和JavaScript文件；对于 Bootstrap 4（撰写本文时的当前版本是 4.3.1）：

关闭按钮的data-dismiss属性值也要设置为modal:

<button type="button" class="close" data-dismiss="modal">&times;</button>

关闭按钮和旋转木马也应该放在里面 .modal-content — 您可以使用自定义 CSS 使模式透明。

工作示例

/* Automatically open the modal */
$('#myModal').modal('show');

/* Make the modal be transparent */
#myModal .modal-content {
  background-color: transparent;
  border: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Button to close the modal -->
      <div><button type="button" class="close" data-dismiss="modal">&times;</button></div>

      <!-- Carousel -->
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://placeimg.com/550/250/nature" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://placeimg.com/550/250/any" alt="Second slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 3

启动模式时，您可以传递以下选项：

{ keyboard: false, backdrop: 'static'}

这将禁止通过单击背景关闭模式，并且 escape-button。

或

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

并且在关闭图标上，您可以通过添加像

这样的属性来关闭模型

data-dismiss="modal" or ng-click="cancel()"

并在 cancel() 方法上添加功能以关闭模型

`$('#myModal').modal("hide");

Have a look for the same here:

如何关闭 Bootstrap 4 带轮播的 X 上的弹出窗口

How to close Bootstrap 4 Pop-up on X with carousel

jquery

bootstrap-modal

bootstrap-carousel

bootstrap-4

工作示例