web-dev-qa-db-fra.com

charger une URL externe dans la boîte de dialogue modale jquery ui

pourquoi ne pas afficher ibm.com dans un modal 400x500px? La section semble être correcte, mais le modal contextuel n'apparaît pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.23.custom.css"/>

</head>

<body>

<p>First open a modal <a href="http://ibm.com" class="example"> dialog</a></p>

</body>

<!--jQuery-->
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>

<script type="text/javascript">
function showDialog(){
    $(".example").dialog({
    height: 400,
            width: 500,
            modal: true 
return false;   
}
 </script>

</html>
jqueryjquery-ui
31
verlager
var page = "http://somurl.com/asom.php.aspx";

var $dialog = $('<div></div>')
               .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 625,
                   width: 500,
                   title: "Some title"
               });
$dialog.dialog('open');

Utilisez ceci dans une fonction. C'est très bien si vous voulez vraiment charger une URL externe en tant que IFRAME. Assurez-vous également que la boîte de dialogue est dans jqueryUI personnalisé.

56
Rui Lima

EDIT: Cette réponse peut être obsolète si vous utilisez une version récente de jQueryUI.

Pour qu'une ancre déclenche le dialogue -

<a href="http://ibm.com" class="example">

Voici le script -

$('a.example').click(function(){   //bind handlers
   var url = $(this).attr('href');
   showDialog(url);

   return false;
});

$("#targetDiv").dialog({  //create dialog, but keep it closed
   autoOpen: false,
   height: 300,
   width: 350,
   modal: true
});

function showDialog(url){  //load content and open dialog
    $("#targetDiv").load(url);
    $("#targetDiv").dialog("open");         
}
15
Robin Maben

Ce qui suit fonctionnera immédiatement sur n’importe quel site:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
 
    <div class="dialogBox" style="border:1px solid gray;">
        <a href="/" class="exampleLink">Test</a>
        <!-- TODO: Change above href -->
        <!-- NOTE: Must be a local url, not cross domain -->
    </div>
    
    <script type="text/javascript">
         

        var $modalDialog = $('<div/>', { 
          'class': 'exampleModal', 
          'id': 'exampleModal1' 
        })
        .appendTo('body')
        .dialog({
            resizable: false,
            autoOpen: false,
            height: 300,
            width: 350,
            show: 'fold',
            buttons: {
                "Close": function () {
                    $modalDialog.dialog("close");
                }
            },
            modal: true
        });

        $(function () {
            $('a.exampleLink').on('click', function (e) {
                e.preventDefault();
                // TODO: Undo comments, below
                //var url = $('a.exampleLink:first').attr('href');
                //$modalDialog.load(url);
                $modalDialog.dialog("open");
            });
        });

    </script>
6
Jason Williams
if you are using **Bootstrap** this is solution, 

$(document).ready(function(e) {
    $('.bootpopup').click(function(){
  var frametarget = $(this).attr('href');
  targetmodal = '#myModal'; 
        $('#modeliframe').attr("src", frametarget );   
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<a  href="http://Twitter.github.io/bootstrap/" title="Edit Transaction" class="btn btn-primary btn-lg bootpopup" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
         <iframe src="" id="modeliframe" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
      </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>
  </div>
</div>
1
Khadka Pushpendra

Les modaux chargent toujours le contenu dans un élément de la page, qui est le plus souvent un div. Pensez à ceci div comme l’équivalent iframe en ce qui concerne les dialogues jQuery UI. Désormais, tout dépend de vos besoins, que vous souhaitiez un contenu statique résidant dans la page ou que vous souhaitiez extraire le contenu d’un autre emplacement. Vous pouvez utiliser ce code et voir si cela fonctionne pour vous:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.23.custom.css"/>

</head>

<body>

    <p>First open a modal <a href="http://ibm.com" class="example"> dialog</a></p>
    <div id="dialog"></div>
</body>

<!--jQuery-->
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>

<script type="text/javascript">

$(function(){
//modal window start
$(".example").unbind('click');
$(".example").bind('click',function(){
    showDialog();
    var titletext=$(this).attr("title");
    var openpage=$(this).attr("href");
    $("#dialog").dialog( "option", "title", titletext );
    $("#dialog").dialog( "option", "resizable", false );
    $("#dialog").dialog( "option", "buttons", { 
        "Close": function() { 
            $(this).dialog("close");
            $(this).dialog("destroy");
        } 
    });
    $("#dialog").load(openpage);
    return false;
});

//modal window end

//Modal Window Initiation start

function showDialog(){
    $("#dialog").dialog({
        height: 400,
        width: 500,
        modal: true 
    }
</script>

</html>

Il y a cependant quelques points à garder à l'esprit. Vous ne pourrez pas charger d'URL distantes sur votre système local. Vous devez les télécharger sur un serveur si vous souhaitez charger une URL distante. Même dans ce cas, vous ne pouvez charger que les URL appartenant au même domaine. par exemple. Si vous téléchargez ce fichier sur "www.example.com", vous ne pouvez accéder qu'aux fichiers hébergés sur "www.example.com". Pour charger des liens externes this pourrait vous aider. Vous trouverez toutes ces informations dans le lien suggéré par @Robin.

0
Tiquelou