34

なぜこれはibm.comを400x500pxモーダルに表示しないのですか？セクションは正しいように見えますが、ポップアップモーダルは表示されません。

<!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>
4

6 に答える 6

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

これを関数内で使用します。これは、外部 URL を IFRAME として読み込みたい場合に最適です。また、カスタム jqueryUI にダイアログがあることを確認してください。

于 2012-12-24T12:10:20.720 に答える
15

編集：最近のバージョンのjQueryUIを使用している場合、この回答は古くなっている可能性があります。

ダイアログをトリガーするアンカーの場合-

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

これがスクリプトです-

$('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");         
}
于 2012-08-27T06:23:18.023 に答える
0

モーダルは常にコンテンツをページ上の要素にロードします。これは多くの場合、div. divjQuery UI ダイアログに関しては、これとiframe同等と考えてください。ページ内にある静的コンテンツが必要なのか、他の場所からコンテンツを取得したいのかは、要件によって異なります。このコードを使用して、それが機能するかどうかを確認できます。

<!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>

ただし、留意すべき点がいくつかあります。ローカル システムにリモート URL をロードすることはできません。リモート URL をロードする場合は、サーバーにアップロードする必要があります。その場合でも、同じドメインに属する URL のみを読み込むことができます。たとえば、このファイルを「www.example.com」にアップロードすると、「www.example.com」でホストされているファイルにのみアクセスできます。外部リンクを読み込む場合、これが役立つ場合があります。このすべての情報は、@Robin が提案するリンクに記載されています。

于 2012-10-15T19:23:05.930 に答える