Question

关闭模态我有问题，我检查jquery和它的确定。

我使用的是1.12.4版本，我在代码头中有标记：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

我的开放式模式标签是：

<a data-toggle="modal" class="modal-trigger" data-id="11" href="#komentarM"></a>

我的模态cocde是：

<div id="komentarM" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
    <input type="text" name="id" value=""></input>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

使用此代码，我尝试触发显示模态：

<script>

$（document）.ready（function（）{

$('#komentarM').on('shown.bs.modal', function (e) {
    data = $(e.relatedTarget).data('id')
    $(e.currentTarget).find('input[name="id"]').val(data);
});

}）;

问题是，当我点击关闭模态，或点击页面上的黑色空格我的模态已关闭，但当我点击再次打开模态时，只有叠加显示。我发布了一张图片，当我关闭模态并再次打开时会发生什么。

Answer 1

你检查过chrome / firefox错误控制台吗？我认为当它试图重新打开模态时会抛出一些js错误。原因可能是在重新打开时重新执行以下代码。我可能对下面的代码不正确，但必须在控制台中记录一些错误，这将有助于调试

$('#komentarM').on('shown.bs.modal', function (e) {
data = $(e.relatedTarget).data('id')
$(e.currentTarget).find('input[name="id"]').val(data);
});

如果控制台中没有抛出错误，那么我建议尝试将jquery库更改为下一个稳定版本，并确保它与bootstrap框架兼容。只是一个调试的建议

如果您不使用显示的事件，那么它是否有效（模态重新打开）？

[修改样本]

 <html>
 <head>
 <script
   src="https://code.jquery.com/jquery-1.12.4.js"
   integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
   crossorigin="anonymous"></script>
 <link      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css     " rel="stylesheet" integrity="sha384-     BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"      crossorigin="anonymous">
 <script      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </head>
 <body>
 <div id="komentarM" class="modal">
<div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
</div>
<input type="text" name="id" value=""></input>
<div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
     </div>
 </div>
 <a data-toggle="modal" class="modal-trigger" data-id="11"      href="#komentarM">Hello</a>

 </body>
 <script> 
 $(document).ready(function () {

 $('#komentarM').on('shown.bs.modal', function (e) {
     data = $(e.relatedTarget).data('id')
     $(e.currentTarget).find('input[name="id"]').val(data);
     });
 });

</script>

Answer 2

您忘记在第2行添加分号：2

＆＃13;

$('#komentarM').on('shown.bs.modal', function (e) {
    data = $(e.relatedTarget).data('id');
    $(e.currentTarget).find('input[name="id"]').val(data);
});

＆＃13;

Answer 3

问题是关闭模态，模态是关闭但不在代码中，当我再次尝试打开开始休息时，我在jq中添加：

$(document.body).on('click', '.lean-overlay', function () {
$('.modal').modal('hide');
});

莫代尔不要关闭

3 个答案: