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'].

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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