Notice:<\/strong> Bootstrap\u2019s built-in remote modal loading was deprecated in Bootstrap 3.3.0 and removed in Bootstrap 4. This article applies to legacy Bootstrap 3 projects.<\/p>\n\n\n\n Opening a modal is well documented<\/a> for the Bootstrap framework when the modal\u2019s contents are located within the same document. However, if the modal content is stored in a remote file, the process becomes slightly more nebulous. After some experimenting and Stack Overflow research, I compiled the following steps.<\/p>\n\n\n\n The link for opening a modal must still target a container element of some sort, typically a DIV id. You may also choose to target the container by class. For remote files, you need to include an href attribute as well, targeting the remote file location.<\/p>\n\n\n Next you need to prepare the calling document (the same document that contains the modal link) with a modal container. This is exactly the same as with a normal modal, except you are only adding the modal’s container elements<\/em>, not its content<\/em>.<\/p>\n\n\n The last step is to prepare your remote document. Add whatever content you wish. The only special caveat to consider is you do NOT add the modal container elements to this document. You only add the content. The content itself may include its own container elements, formatting, and so forth. In the example below, the modal is a simple list, and therefore only the markup for the list is included.<\/p>\n\n\n You’ve probably already guessed what’s going on here. When the modal link is clicked, Bootstrap loads the remote document\u2019s contents and injects them into the .modal-content element inside the targeted modal container. Bootstrap Modal Documentation<\/a> (extracted 2017-01-23):<\/p>\n\n\n\n If a remote URL is provided, content will be loaded one time<\/strong> via jQuery’s Link<\/h2>\n\n\n\n
\n<a href="modal_document.php" data-target="#modal_div_container_id" data-toggle="modal">Open Modal<\/a>\n<\/pre><\/div>\n\n\n
Modal Container<\/h2>\n\n\n\n
\n<div class="modal fade" id="modal_div_container_id">\n <div class="modal-dialog">\n <div class="modal-content">\n <!-- Modal content area - leave this empty.-->\n <\/div>\n <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
Modal Document (Content)<\/h2>\n\n\n\n
\n<ul> \n <li>Item 1<\/li>\n <li>Item 2<\/li>\n <li>Item 3<\/li>\n<\/ul>\n<\/pre><\/div>\n\n\n
\n
load<\/code> method and injected into the .modal-content<\/code> div. If you’re using the data-api, you may alternatively use the href<\/code> attribute to specify the remote source.<\/p>\n<\/blockquote>\n\n\n\n