Using bootstrap 3.0 modals to load dynamic, remote

Question

I have tried several of the suggestions posted here on other questions and on stackexchange, and nothing is working to my satisfaction.

I am trying to load dynamic content into a modal. Specifically, YouTube videos or Soundcloud audio within an iFrame. So that any user who visits the site, can enter links for videos or audio. The modal then dynamically loads that users links. Each subsequent user can see each others links, all within a modal. (separate modal loads up for each user)

I can't get this to work quite right. I have created a separate html file called "modal.html" to test this out, which includes an iframe with the proper YouTube/Soundcloud clip.

I am also confused about whether i need to use "data-remote=" inside my tag, or does the href suffice? Or do I use the data-remote inside the first of the modal. Or Both, or either? Neither has worked.

Here's my code:

<a data-toggle="modal" href="modal.html" data-target="#myModal">Click me</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-     remote="modal.html" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

Probably an old post, I had a similar problem a time ago, i wanted to press a link, which would pass the href of a text file (or any other file) to an iframe inside a modal window, i solved like this:

function loadiframe(htmlHref) //load iframe
{
document.getElementById('targetiframe').src = htmlHref;
}


function unloadiframe() //just for the kicks of it
{
var frame = document.getElementById("targetiframe"),
frameHTML = frame.contentDocument || frame.contentWindow.document;
frameHTML.removeChild(frameDoc.documentElement);	
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<a class=" btn btn-danger" onClick="loadiframe('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css')" data-toggle="modal" data-target="#myModal">LINK</a><!--link to iframe-->




<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header" style="border:hidden">
        <button type="button" class="close" onClick="unloadiframe()" data-dismiss="modal" aria-label="Close"><span aria-   hidden="true">&times;</span></button>
      </div>
      
      <div class="modal-body" style="padding-top:10px; padding-left:5px; padding-right:0px; padding-bottom:0px;">
        
      <iframe src="" frameborder="0" id="targetiframe" style=" height:500px; width:100%;" name="targetframe" allowtransparency="true"></iframe> <!-- target iframe -->
        
      </div> <!--modal-body-->
      
      <div class="modal-footer" style="margin-top:0px;">
        <button type="button" class="btn btn-default pull-right" data-dismiss="modal" onClick="unloadiframe()">close</button>
      </div>
      
    </div>
  </div>
</div>

So in this case you have only one modal, one iframe, which you load and unload.

Answer 2

if you need show a preformatted web page, need something like this

$('#btn').click(function() {
    $.ajax({
        url: 'url-src/dialog.html',
        dataType: 'json',
        type: 'POST',
        success: function(data) {
            if (data.check) {
                var $modal = $(data.dialog);
                $('body').append($modal);
                $modal.filter('.modal').modal();
            } else {
                alert(data.dialog);
            }

        }
    });

});

html of the dialog.html

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>Dialog</h3>
        </div>
        <div class="modal-body">
            <form role="form"  class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="mutual">Example: </label>
                    <div class="col-sm-6">
                        <input type="text" id="example-form" value="" class="form-control">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button id="edit-form"  data-id-mutual="" class="btn btn-primary">Save</button>
            <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

this html have a form example, you have to add a html with video inside.

Answer 3

function javascript_function(item_code)
{
var d = new Date();
var url_to_zoom='http://localhost.com/application/page.php?id=2&item_code='+item_code+'&reqdate='+d.getTime();

$('#modal_box').modal({keyboard:true,backdrop:true,show:true,remote:url_to_zoom});
}

Answer 4

you can try this bootstrap helper to dialogs

it has support for ajax request, iframes, common dialogs, confirm and prompt!

you can use it as:

eModal.iframe('http://someUrl.com', 'This is a tile for iframe', callbackIfNeeded);

eModal.alert('The message', 'This title');

eModal.ajax('/mypage.html', 'This is a ajax', callbackIfNeeded);

eModal.confirm('the question', 'The title', theMandatoryCallback);

eModal.prompt('Form question', 'This is a ajax', theMandatoryCallback);

this provide a loading progress while loading the iframe!

No html required.

You can use a object literal as parameter to extra options.

Check the site form more details.

best,

Answer 5

Why neither data-remote or href work on remote sites like youtube

Twitter bootstrap's modal uses AJAX to load remote content via data-remote/href. AJAX is constrained by the same origin policy so accessing a site with a different origin, like youtube, will produce this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource

So neither data-remote or href will do what you want.

JSON: If you were getting json data then you could potentially use JSONP. But since you need html, not json, from sites like youtube we need another approach:

Solution using <iFrame>

An <iframe> will work for youtube and many other remote sites (even this solition doesn't work for all sites as some, like Facebook, explicitly block iframes by setting X-Frame-Options' to 'DENY') .

One way to use an iframe for dynamic content is to:

1) add an empty iframe inside your modal's body:

<div class="modal-body">
    <iframe frameborder="0"></iframe>
</div>

2) add some jquery that is triggered when the modal dialog button is clicked. The following code expects a link destination in a data-src attribute and for the button to have a class modalButton. And optionally you can specify data-width and data-height- otherwise they default to 400 and 300 respectively (of course you can easily change those).

The attributes are then set on the <iframe> which causes the iframe to load the specified page.

$('a.modalButton').on('click', function(e) {
    var src = $(this).attr('data-src');
    var height = $(this).attr('data-height') || 300;
    var width = $(this).attr('data-width') || 400;

    $("#myModal iframe").attr({'src':src,
                               'height': height,
                               'width': width});
});

3) add the class and attributes to the modal dialog's anchor tag:

<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>

Demo Fiddle using youtube