2016-12-22 3 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

Нет, я просто не знаю, как писать код .load() на странице test2.php, потому что в test2.php есть только 2 строки кода – 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

, но я думаю, что если у него много страниц, будет сложно написать много анонимных функций, поэтому я просто напишу событие и загрузим кодировку test3.php на странице test2.php и включим jquery-ui.js на стр. 2. – doflamingo

+0

Да нет необходимости включать jquery-ui.js в стр. 2 –

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

Нет, я просто не знаю, как писать код .load() на странице test2.php, потому что в test2.php есть только 2 строки кода – doflamingo

+0

Я хочу загрузить test3.php в test2.php – doflamingo

+0

Добавить имя страницы (test3.php) в load() –

Смежные вопросы