Home > Developer > JavaScript
In iframe, make the bootstrap modal box pop up on the parent page. iframebootstrap
The iframe is used on the page during project writing over the past few days. However, when the bootstrap modal box is used in the subpage, the pop-up modal box is centered on the subpage, in addition, the mask layer only contains the part of the child page, and the whole page cannot be directly viewed. Therefore, you can think about how to make the modal box pop up based on the parent page. After searching for information on the Internet, A solution is summarized.
Effect display
Pre-modification page
Modified PAGE
Implementation
To enable the modal box to be opened on the top-level page, I want to make the bootstrap modal box pop up on the parent page.
First, we will create a separate page for the div to be popped up. When the child page needs to be popped up, the parent page will pop up the div.
Separate the modal box into a page
Home Page
<!DOCTYPE html>Modal box page
<Div class = "modal-content"> <div class = "modal-header"> <button type = "button" class = "close" data-dismiss = "modal" aria -label = "Close"> <span aria-hidden = "true"> × </span> </button>
In this way, you can separate the div of the modal box into a page.
Modify the home page and add sub-pages
After modification, the main page
<!DOCTYPE html>In this way, the home page has two subpages, And the pop-up mode box method is encapsulated into the modalOut (url) method.
Subpage dialog box
When the child page needs to pop up the modal box, load the modalOut (url) method in the parent page:
The subpage js is as follows:
var _iframe = window.parent;_iframe.modalOut('xxx.html');The above is the solution to the problem that the modal box in the subpage does not cover all pages,
Note: js is not loaded in html. Load the js related to bootstrap on your own.
Summary
The above section describes how to enable the bootstrap modal box in iframe to pop up on the parent page. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
