1

Всем привет. Друзья подскажите пожалуйста как сделать открытие страницы в модельном окне как в Вконтакте. Пробовал с помощью ajax

$.ajax({  
                    type: "POST",  
                    url: "/contacts",  
                    data: data,
                    success: function(html){  

                     $("#testResult").html(html).css('visibility','visible');            
                 }           
                });

Страница обратной связи. Все вроде открывалось, но обнаружил проблему. У меня обработка данных через ajax. И она перестала работать. Вот код обработки данных

$(document).ready(function(){ 
 $('#contactsForm').submit(function(){
$('#loading-formcontacts').css('visibility','visible');
$("#contactsResult").css('visibility','hidden'); 
   var data = {
    name: $('#name').val(),
    mail: $('#mail').val(),
    subj: $('#subj').val(),
    textform: $('#textform').val(),
    code: $('#code').val()
}
setTimeout(function(){
                $.ajax({  
                    type: "POST",  
                    url: "/contacts/form.php?action=submit",  
                    data: data,
                    success: function(html){
                    $('#loading-formcontacts').css('visibility','hidden');                      
                    $("#contactsResult").html(html).css('visibility','visible');            
                }            
                }); 
}, 1000);               
                return false;  
            });  
});

Друзья подскажите как правильно делать открытие страниц в модальном окне? Что бы потом и ajax обработка там работала. С обработкой все в порядке. не в модальном окне она работает.

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 4 мая 2015 в 7:58

2 ответа 2

1

Eсли нужно подгрузить в модальном окне страницу с сохранением ее внутренней работоспособности, то лучше использовать iframe

$("#dialog").dialog({
  autoOpen: false,
  modal: true,
  height: 600,
  open: function(ev, ui) {
    $('#myIframe').attr('src', 'http://www.jQuery.com');
  }
});

$('#dialogBtn').click(function() {
  $('#dialog').dialog('open');
});
#myIframe {
  height: 580px;
}
<!DOCTYPE html>
<html>

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div id="dialog">
    Your Iframe Below
    <iframe id="myIframe" src=""></iframe>
  </div>
  <button id="dialogBtn">Open Dialog</button>

</body>

</html>

Отправлять данные в iframe, можно попробовать, таким способом:

 <form action="/contacts" method="post" target="myIframe" id="formid">
       <input type="hidden" name="foo" value="bar" />
    </form>

$("#formid").submit();

или так:

$("#submit").click(function(e){
    e.preventDefault();
    $("#form").attr('target', 'myIframe').submit();
});
0

Попробуйте fancybox. Мощная библиотека, без багов открывает модальные окна. В общем вот: http://fancyapps.com/fancybox/ По Вашему коду:

type: "POST",  
url: "/contacts/form.php?action=submit",  
data: data,

Так будет правильней:

type: "GET",  
url: "/contacts/form.php", 
data: ({ action : "submit" })

Соответственное в php должна приниматься $_GET['action'].

Попробуйте поменять, возможно проблема именно в этом.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.