web-dev-qa-db-fra.com

Utilisation de modaux bootstrap 3.0 pour charger du contenu dynamique distant dans une iframe

J'ai essayé plusieurs des suggestions affichées ici sur d'autres questions et sur stackexchange, et rien ne fonctionne à ma satisfaction. 

J'essaie de charger du contenu dynamique dans un modal. Plus précisément, vidéos YouTube ou audio Soundcloud dans un iFrame. Pour que tout utilisateur visitant le site puisse entrer des liens pour des vidéos ou de l'audio. Le modal charge ensuite dynamiquement les liens des utilisateurs. Chaque utilisateur suivant peut voir les liens de chacun, tous au sein d'un modal. (charges modales distinctes pour chaque utilisateur) 

Je ne peux pas que cela fonctionne correctement. J'ai créé un fichier html distinct appelé "modal.html" pour le tester, qui inclut un iframe avec le clip YouTube/Soundcloud approprié. 

Je ne comprends pas non plus si je dois utiliser "data-remote =" dans mon tag ou si le href suffit. Ou est-ce que j'utilise la télécommande de données à l'intérieur du premier modal? Ou les deux, ou les deux? Ni a fonctionné.

Voici mon 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 -->
javascripthtml5twitter-bootstrapiframemodal-dialog
23
Alex S

si vous avez besoin d'afficher une page Web préformatée, besoin de quelque chose comme ceci

$('#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 du 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 -->

ce html a un exemple de formulaire, vous devez ajouter un html avec une vidéo à l'intérieur.

12
Figa17

Probablement un ancien post, j'avais un problème similaire il y a quelque temps, je voulais appuyer sur un lien, qui transmettrait le href d'un fichier texte (ou de tout autre fichier) à un iframe à l'intérieur d'une fenêtre modale, j'ai résolu comme ceci:

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>

Donc, dans ce cas, vous n’avez qu’un seul modal, un iframe, que vous chargez et déchargez.

2
Sachi Cortes

vous pouvez essayer cet assistant d'amorçage aux dialogues

il supporte les requêtes ajax, les iframes, les boîtes de dialogue communes, confirmer et Prompt!

vous pouvez l'utiliser comme:

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);

ceci fournit une progression du chargement lors du chargement de l'iframe!

Aucun html requis.

Vous pouvez utiliser un littéral d'objet comme paramètre pour des options supplémentaires.

Vérifiez la forme du site plus de détails.

meilleur,

1
Samuel Pinto
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});
}
0
Sunit