单击其中的区域

Question

我正在尝试使用bootstrap material，我的问题是我点击内部后会立即对话。我希望能够关闭它，但只能关闭按钮或点击外面。但不是缺点！

<div class="container-fluid">
    <section id="landing">
        <button id="video-button" class="btn btn-success btn-raised" data-toggle="modal" data-target="#video-dialog">
            Quick tour
        </button>
    </section>
    <section id="about">
    </section>

    <!-- video dialog -->
    <div id="video-dialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Dialog</h4>
                </div>
                <div class="modal-body">
                    <p>body. when I click here the dialog get closed.</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
                </div>
            </div>
        </div>
    </div>
</div>

更新

问题出在 div.modal-backdrop ，因为它位于模态内容之前，实际上涵盖了我的对话框。