Question

我正在使用存储的会话数据弹出Bootstrap模式窗口，但我无法关闭它。我不得不在div中添加“show”类，以便它甚至出现。

 @if (Session::has('message'))
<script type="text/javascript">
    $(window).load(function() {
        $('#confirm').modal('show');

    });

</script>
<div class="modal show" id="confirm"> 
    <div class="modal-dialog">
        <div class="modal-content">   
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">Close</span></button>
                <h4>{{ Session::get('message') }}</h4>
            </div>
            <div class="modal-body">
                <p>You are now signed up for our newsletter.</p>
            </div>
        </div>
    </div>



</div>
@endif

Answer 1

您的模式应该通过调用$('#confirm').modal('show')显示得很好，因此请检查您的浏览器控制台是否存在任何javascript错误。至于关闭它同样容易：

$('#confirm').modal('hide');

这是一个在加载时自动打开并在等待5秒后关闭它的示例：http://jsfiddle.net/7wt719p3/1/

修改

确保在Bootstrap JS插件文件之前加载jQuery。 Bootstrap需要jQuery才能使用它的插件（比如模态）。以下是如何使用CDN包含它：

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Answer 2

你的html结构

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

显示：

$('#basicModal').modal({'show':true});

隐藏

$('#basicModal').modal({'show':false});

关闭Laravel中的Bootstrap模态窗口

2 个答案:

修改