Bootstrap 5 create a modal with javascript when Modal.show() the dialog is moved into iFrame

There is a page with iFrame and the div modal dialog in this page. I want to trigger modal from the page inside iFrame (modal is on parent page), when the modal is shown the div modal dialog is moved into iFrame page under body. How can i fix it?

Parent page

<div id="MyModal" class="modal fade bd-example-modal-md modal-mention" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered ps-modal" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">MyModal
                        <span class="modal-title-desc"></span>
                    </h4>
                    <button id="btClose" type="button" data-bs-dismiss="modal" class="close" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
               ..     .
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

Page in iFrame

var myModal = new bootstrap.Modal(parent.document.getElementById('MyModal'), { keyboard: true, backdrop: 'static' });

myModal.show();

Before show modal

After modal is shown

Now i work around wi开发者_如何学编程th move the div modal back when the modal is hidden.