jqueryのダイアログモーダル変更ページがモーダル内にありますか？

こんにちはjqueryダイアログポップアップ（モーダル）をポップアップ内の他のページに変更することができます（存在するポップアップの他のページをロードしてください）jqueryのダイアログモーダル変更ページがモーダル内にありますか？

私はtest3.phpをモーダルの中にロードする方法を知りませんここ

test2.php

でのコーディングは

test1.php私の試みである

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Dialog - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

</head> 
<body> 
<button id="btn">Click to Popup</button> 

<div id="dialog" title="Basic dialog"> 
    here 
</div> 
<script> 
    $(function() { 
     $("#dialog").dialog({ 
      open: function(event, ui) { 
      $('#dialog').load('test2.php', function() { 
       alert('Load was performed.'); 
      }); 
      }, 
      modal: true, 
      autoOpen: false, 
      title: "jQuery Dialog", 
      width: 600, 
      height: 350 
     }); 

    $("#btn").click(function(){ 
     $('#dialog').dialog('open'); 
    }); 
    }); 
</script> 


</body> 
</html>

test2.php

this is test2.php page <br/> 
<a href="test3.php"> Go to Page test3.php </a>

test3.php

<p> this is test3.php page </p>

出典

2016-12-22 doflamingo

ブラウザのコンソールを確認してください。間違いを見てくださいか？ –

いいえいいえtest2.phpに2行のコードしかないので、test2.phpページのコード.load（）を書く方法が分かりません – doflamingo

は

$(function() { 
    $("#dialog").dialog({ 
     open: function(event, ui) { 
     $('#dialog').load('test2.php', function() { 
      $('#mylink').click(function(){ 
       $('#dialog').load('test3.php', function() { 
         alert('Load was performed.'); 
       }); 
      }); 
     }); 
     }, 
     modal: true, 
     autoOpen: false, 
     title: "jQuery Dialog", 
     width: 600, 
     height: 350 
    }); 

    $("#btn").click(function(){ 
     $('#dialog').dialog('open'); 
    }); 
});

test2.php

this is test2.php page <br/> 
 
<button id="mylink">Go to Page test3.php</button>

test1.phpでこれを試してみてください

出典

2016-12-22 06:06:53

ありがとう！カッコいい。 – doflamingo

しかし、複数のページがあると、多くの匿名関数を記述するのが難しいと思うので、test2.phpページでevent3.phpのコーディングをロードして、代わりにpage2にjquery-ui.jsを含めます。 – doflamingo

はいページ2にjquery-ui.jsを含める必要はありません –

コードの下に使用してみてください：

$(document).ready(function() { 

    var dlg=$('#dialog').dialog({ 
     title: "jQuery Dialog", 
     resizable: true, 
     autoOpen:false, 
     modal: true, 
     hide: 'fade', 
     width:350, 
     height:275 
    }); 


    $('#btn').click(function(e) { 
     e.preventDefault(); 
     dlg.load('test3.php', function(){ 
      dlg.dialog('open'); 
     }); 
     }); 
});

出典

2016-12-22 05:20:16

いいえいいえコードを書く方法がわかりません.load（） test2.phpには2行のコードしかありません – doflamingo

test2.phpにtest3.phpをロードしたい – doflamingo

load（）内のページの名前（test3.php）を追加します –

jqueryのダイアログモーダル変更ページがモーダル内にありますか？

答えて

関連する問題