Сделать форму в a-div появляться поверх содержания

Уверен, это было задано раньше, но мой google-fu не смог найти ответ.Сделать форму в a-div появляться поверх содержания

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

Я уверен, что это было решено раньше, так как я видел его на сайтах. Есть ли простой способ сделать это, например, плагин jquery или другой javascript API?

Или мне нужно написать форму в div вручную, наложить ее на z-index в css и скрыть ее. И тогда, когда он называется, появляется форма?

Что это самый простой способ решить эту проблему? Большое спасибо

источник

2010-07-30 Reily Bourne

Похоже, вы ищете модальное всплывающее окно, которое извлекает форму с сервера с помощью HTTP-запроса.

Есть много примеров в Интернете. Проверьте JQuery ThickBox: http://jquery.com/demo/thickbox/

Еще лучше, вот страница с более чем 30 примеров, чтобы выбрать из: http://www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/

источник

2010-07-30 13:27:45

Вы можете посмотреть плагин FancyBox (первоначально предназначенный для отображения изображений, но также может быть использован и для форм).
См. Эту ссылку: http://fancybox.net/blog, в середине страницы найдите «5. Показать форму входа в систему».

источник

2010-07-30 13:25:14 naivists

Попробуйте использовать любой из превосходных плагинов типа "lightbox" jQuery, которые позволяют использовать контент Ajax.

Просто выполните поиск "jquery lightbox."

источник

2010-07-30 13:25:22 Squirkle

Вы можете написать некоторые CSS, чтобы показать свою форму на вершине с абсолютным позиционированием. что-то вроде:

#inputForm { 
position: absolute; 
top: 10px; 
left: 100px; 
width: 300px; 
height: 200ps; 
}

и затем использовать следующую разметку:

<html> 
    <head> 
    </head> 
    <body> 
     <div> 
      Click to login <input type="button" id="btnLogin" /> 
     </div> 
     <div id="inputForm" style="display:none;"> 
      <!-- your form controls --> 
      <input type="button" id="btnSubmit" /> 
     </div> 
     <script language="javascript" type="text/javascript"> 
      $(document).ready(function() { 
       $('#btnLogin').click(function() { 
        $('#inputForm').show(); 
       }); 
       $('#btnSubmit').click(function() { 
         $('#inputForm').hide(); 
         // collect form data 
         // make your AJAX request 
       }); 
      }); 
     </script> 
    </body> 
</html>

источник

2010-07-30 13:38:46

Конечно, если вы не» t хочу использовать мега/awesome/best-box plug-in ^^ –

Я согласен с другими парнями: вы хотите что-то вроде [толстый | света | цвет | фантазия | ...] - коробка. Так, говоря мое любимое решение: http://nyromodal.nyrodev.com/#demos

Хорошая вещь, что вы можете заставить его вести себя как iframe и просто передать URL в форму вы хотите показать ..

источник

2010-07-30 13:39:22 harpax

Сделать форму в a-div появляться поверх содержания

ответ

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