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

Question

I have a <div> element defined in Navpane.html, it is a html navigation panel.
I am able to access this div using id from other html page but I am not able to show this dialog in the current frame. It's throwing error.

<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");

I am getting the div using javascript from the other frame and calling modal() function on this . it is failing with the error message.

Uncaught TypeError: top.window.frames[1].document.getElementById(...).modal is not a function(…)

Thanks

Answer 1

You need to get the jQuery element and call modal() on that. If you are using bootstrap it should already be included in your page else add a reference to jQuery.js

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

or

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