Fri, April 10, 2020, 08:50:29
 
Home · Latest · Trends  /  HTML, XML
10

Bootstrap 4 How to open external url in modal dialog

<a href="#mymodal" data-remote="my-remote-file.php" data-toggle="modal" data-target="#mymodal">Launch demo modal</a>

<div class="modal" id="mymodal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                my-remote-file.php content
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script>
$('#mymodal').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget);
    var modal = $(this);
    modal.find('.modal-body').load(button.data("remote"));
});
</script>
rated 12 times [  11] [ 1]  / comments: 0 / hits: 1955  / 1 year ago, thu, may 2, 2019, 16:15:11
More From » HTML, XML
 

Comments

There are no comments for this Snippet yet
Username
 
Your Comment
 
Share
Sponsor
Sponsor
Snippets
1 year ago, sun, may 5, 2019
12 months ago, fri, may 10, 2019
12 months ago, mon, may 13, 2019
10 months ago, thu, jul 11, 2019
Posted
cilipe

cilipe

Member since May 2, 2019
Total Code Snippets: 5
Total Comments: 0
Location: n/a
Following
User not following anyone yet.