2013-08-13 2 views
3

Всякий раз, когда я пытаюсь заполнить форму для входа (которая является великолепным всплывающим окном ajax), она закрывается в первом экземпляре щелчка.Щелчок в любом месте закрывает MagnificPopup ajax box

main.html

$(document).ready(function() { 
 
    $('.ajax-popup-link').magnificPopup({ 
 
     type: 'ajax', 
 
     alignTop: false, 
 
     overflowY: 'scroll' 
 
    }); 
 
});
<a class="simple-ajax-popup-align-top" href="result.php">try me</a><br>

result.php

<div> 
 
    <form action="..." method="post"> 
 
     Email: 
 
     <label class="field_container"> 
 
      Password: 
 
      <input type='text' name='cust_username' id='username' maxlength="12" style="width: 250px; height: 30px" /></label> 
 
     <label class="field_container"> 
 
      Password: 
 
      <input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px" /></label> 
 
     <input type='submit' name='Submit' value='Login' /> 
 
    </form> 
 
</div>

ответ

2

Убедитесь, что страницы, которые вы «Аякс-кий», не содержащие больше информации или тегов, чем это необходимо. . она должна быть чистой, как это:

<div> 
<h3>Heading</h3> 
<p> 
Text 
</p> 
</div> 

Другими словами, попытаться избежать множественных <div> с и не включают в себя <html>, <body> и т.д. Это, к сожалению, приводит к поведению, описанному в вопросе о закрытии всплывающего. Я предполагаю, что это связано с тем, что у него проблемы с определением того, где находится контент, поэтому он думает, что вы нажали внешнее содержимое => закрывает всплывающее окно.

closeOnContentClick: false 

уже установлен по умолчанию, так что это не поможет, но очистка кода до максимально возможной степени.

Я также хотел бы упомянуть альтернативу: http://nyromodal.nyrodev.com/, который, кажется, обрабатывает вещи более гладко, а также включает фильтрацию содержимого по идентификатору.

1

добавить это в ваши Magnific вариантов всплывающего

closeOnContentClick: false 

так

$('.ajax-popup-link').magnificPopup({ 
    type: 'ajax', 
    alignTop: false, 
    overflowY: 'scroll', 
    closeOnContentClick: false 
}); 
+0

не работа над firefox, не проверял на хром –

0

добавить это в ваших Magnific варианты всплывающих для мыши внутренней белой коробке

closeOnContentClick: false 

Стоп закрытия окна, когда нажмите на черном Б.Г.

closeOnBgClick:false 

Полный пример

$.magnificPopup.open({ 
     items: { 
      src: '<div class="white-popup"><h1>Modal Test</h1><p>Test Some text.</p><p><a class="popup-modal-dismiss">Dismiss</a></p></div>', 
      type:'inline' 
     }, 
     closeOnContentClick: false, 
     closeOnBgClick:false 
    }); 

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

  • Нет связанных вопросов^_^