javascript - 使用 javascript 显示 Bootstrap 模式对话框的问题

Question

我有一个 <div> Navpane.html 中定义的元素，它是一个 html 导航面板。
我可以使用来自其他 html 页面的 id 访问此 div，但我无法在当前框架中显示此对话框。这是抛出错误。

<div class="panel-body">
    <div class="modal fade" id="TimeoutModal" 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">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">User logout warning</h4>
                </div>
                <div class="modal-body">
                    User session is going to expire within a minute . Do you want to retain the session?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">OK</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                 </div>
            </div>
        </div>
    </div>
</div>

top.window.frames[1].document.getElementById("TimeoutModal");

我正在使用来自其他框架的 javascript 获取 div 并在此调用 modal() 函数。它失败并显示错误消息。

未捕获的类型错误:top.window.frames[1].document.getElementById(...).modal 不是函数(...)

谢谢

Answer 1

您需要获取 jQuery 元素并对其调用 modal()。如果您使用的是 Bootstrap ，它应该已经包含在您的页面中，否则请添加对 jQuery.js 的引用

 $('#TimeoutModal', top.window.frames[1].document).modal();

或

 $('#TimeoutModal', top.window.frames[1].document).modal('show');