时间戳

首页 > 解决方案 > 我正在尝试向我的 html 页面添加模式，但关闭按钮似乎有问题

javascript - 我正在尝试向我的 html 页面添加模式，但关闭按钮似乎有问题

问题描述

我在我的网页中制作了一个模式，当我点击它时它会显示，但是当我点击关闭时，什么也没有发生（它没有关闭）有什么想法吗？

function voice() {
  $("#myModal").modal('show');
  $('.try').css("opacity", "0.3");

}

function closeModal() {
  $("#myModal").modal('hide');
  $('.try').css("opacity", "1");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<a class="boxed-btn3 " onclick="voice()">----- Try -----</a>
<div id="myModal" class="modal fade" tabindex="-1" style="opacity:1;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Try saying something...</h3>
        <button type="button" class="close" data-dismiss="modal" onclick="closeModal()">&times;</button>

      </div>
      <div class="modal-body">
        <i class="fas fa-microphone"></i>
        <button class="button button5"></button>
      </div>

    </div>
  </div>
</div>

标签： javascripthtmlcss

解决方案

我通过改变这个解决了它

<div id="myModal" class="modal fade" tabindex="-1" style="opacity:1;">

对此

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">

推荐阅读