Bootstrap close modal not working

我在这里有两个按钮用于关闭模式。第一个是关闭图标，另一个是取消按钮，两者都使用数据关闭来关闭模式。但是，他们都不工作。我为另一个模式使用相同的代码，并且他们工作正常。任何猜测？Bootstrap close modal not working

<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal"> 
    <div class="modal-dialog"> 
     <div id="timeSelectModalContent" class="modal-content"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <label> 
       <input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox"> 
       <label class="checkbox-label">Thursday, 08:00 pm.</label> 
      </label> 
      <br> 
      <label> 
       <input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox"> 
       <label class="checkbox-label">Thursday, 09:30 pm.</label> 
      </label> 
      <div id="time-modal-footer" class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button> 
      </div> 
     </div> 
    </div> 
</div>

来源

2016-07-23 NoorUllah

这是旧的，但你尝试删除'style =“display：none”'？事实证明，使用它来代替Bootstrap的类/方法来显示和隐藏可能会导致事情中断。 – BSMP

这个线程是旧的，但是当我遇到这个问题时，这是一个给z-index ** **“X”**按钮的问题。 – sani

首先检查你的html文件中是否包含bootstrap.js文件。

你可以试试这个代码和替换的按钮标记为通过关闭模式 -

<a href="#" class="close" data-dismiss="modal" aria-label="close">&times;</a>

如果仍然无法正常工作。让我知道！

您可以在jQuery中的关闭按钮上添加一个点击事件。像这样 -

$("#yourModal").modal("hide");

来源

2016-07-23 04:02:21

没有工作。我在同一个html文件中使用另一个模式中的相同的两个按钮，它们工作正常，所以它肯定包含在内。我只是想知道它是否必须对我的模态定义做些什么。 – NoorUllah

看看现在你可以JavaScript的模式关闭 –

我当然可以。但是使用这种方法的关键就是不要使用js代码，比如听众。 – NoorUllah

刚刚过去这个代码，你想要什么，看看你的代码中有什么错误！

<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 
<h2>click Here</h2> 
<div class="container"> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
    <div class="modal fade" id="myModal" 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">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

</body> 
</html>

来源

2016-07-23 04:12:02

感谢您的帮助，但不起作用。 – NoorUllah

使用此 –

如果仍然无法使用，请使用'$（'button [data-dismiss =“modal” ]'）。click（function（）{ \t \t $（this）.parent（）。parent（）。parent（）。parent（）。modal（'hide'）; – DhirendraBisht

使用此代码关闭模式

<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<h2>click on button</h2> 
 
<div class="container"> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
    <div class="modal fade" id="myModal" 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">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

来源

2016-07-23 05:12:45 Abhishek

很老的话题，但它仍然先显示出来供人搜索这个问题，可能是由他们引起的犯同样的低级错误我没有确定模态分区是否在它启动的主体分区之外。要使用Material Kit作为示例，您应该再次检查目标“#myModal”div是否位于主容器的闭合div标签之外。

<div class="main main-raised"> 
    <div class="container"> 
    <!--     modals --> 
     <div class="row" id="modals"> 
      <div class="col-md-6"> 
       <button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal"> 
        Classic modal 
       </button> 
      </div> 

     </div> 
    <!--     end modals    --> 
    </div> 
</div> 

<!-- Classic Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        <i class="material-icons">clear</i> 
       </button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Hey hey</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-simple">Nice Button</button> 
       <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- End Modal -->

来源

2017-03-19 02:49:54

这不提供答案这个问题。一旦你有足够的声誉，你将能够评论任何帖子;而是提供不需要提问者澄清的答案。 –

Bootstrap close modal not working

回答

相关问题