2016-12-22 2 views
0

안녕하세요 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> 
+0

브라우저 콘솔을 확인하십시오. 오류를보십시오. –

+0

아니요 그냥 test2.php에 2 줄의 코드 만 있기 때문에 test2.php 페이지에서 .load() 코드를 작성하는 방법을 모르겠습니다. – doflamingo

답변

1

이 test1.php

$(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>
에이 시도

+0

고마워요! 멋지다. – doflamingo

+0

하지만 여러 페이지가 있다면 많은 익명의 함수를 작성하기가 어려울 것이라고 생각합니다. 그래서 나는 test2.php 페이지에서 test3.php의 코딩을 대신로드하고 page2에 jquery-ui.js를 포함시킵니다. – doflamingo

+0

예 페이지 2에 jquery-ui.js를 포함 할 필요가 없습니다. –

0

코드 아래에 사용해보십시오 :

$(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'); 
     }); 
     }); 
}); 
+0

아니요 아니요. 코드 작성 방법을 모르겠습니다. test2.php에 2 라인 코드 만 있기 때문에 – doflamingo

+0

test2.php에 test3.php를로드하고 싶습니다. – doflamingo

+0

load()의 페이지 이름 (test3.php)을 추가하십시오 –