Bootstrap 3 Modal external URL

Bootstrap 3, doesnt allow to open external URL’s since uses the jQuery load and doesnt allow to load from other domains. So I use this work around to create an iframe inside the modal body and to change the size of the modal to load correctly the URL.

This is the HTML:

Click me



  

    

      

      
      

  

Javascript you need to add:

$('a.external').on('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $(".modal-body").html('');

    });

    $('#myModal').on('show.bs.modal', function () {
        
        $(this).find('.modal-dialog').css({
                  width:'40%x', //choose your width
                  height:'100%', 
                  'padding':'0'
           });
         $(this).find('.modal-content').css({
                  height:'100%', 
                  'border-radius':'0',
                  'padding':'0'
           });
         $(this).find('.modal-body').css({
                  width:'auto',
                  height:'100%', 
                  'padding':'0'
           });
    })

Works pretty well actually 😉 Based partly in this jsfiddle.