HTML JavaScript Как я могу создать эту форму? - PullRequest
Новая
       14

HTML JavaScript Как я могу создать эту форму?

0 голосов
/ 27 июля 2011

Я столкнулся с действительно симпатичной формой при использовании RapidShare, и мне было любопытно, как они это сделали.Если вы посмотрите ЗДЕСЬ и нажмете «Устранить раздражающее ожидание с RapidPro!»появится меню / форма.Я использую Intuit для разработки своей веб-страницы, и мне было любопытно, действительно ли это форма, которая появляется передо мной.

В качестве возможного побочного вопроса - существует ли простой способ создать красивую таблицу с флажками, похожими на отображаемую RapidShare?Мне очень нравится этот метод для сравнения и сопоставления двух разных планов.

Спасибо за чтение,

Эван

Ответы [ 3 ]

3 голосов
/ 27 июля 2011

Да, содержимое этого «всплывающего окна» представляет собой простую таблицу HTML с некоторыми css, чтобы сделать ее более интересной.Все, что они делают, - это используют Javascript для анимации div, чтобы всплывающее окно в центре экрана, и css, чтобы красиво его стилизовать.Кажется, у них есть собственное решение, которое не использует jQuery, но есть много плагинов фреймворка, которые делают то же самое:

Тамдругие тоже.

2 голосов
/ 27 июля 2011

Ищите fancybox в jQuery

Shadowbox

Greybox

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

1 голос
/ 27 июля 2011

См. NyroModal в Jquery, вы можете увидеть примеры лайтбоксов для HTML-форм и галереи изображений. Загрузите пакет из: http://nyromodal.nyrodev.com/create.php?dl=1, создайте файл и включите эти коды 

**index.html**
<script SRC="jquery.tools.min.js"></script>
<link rel="stylesheet" href="nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.nyroModal.custom.js"></script>
<script type="text/javascript" src="jquery.nyroModal-ie6.js"></script>

<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>
<a class="nyroModal" href="test.html"> Light Box view</a>
----------------------------------------------------------------------------------------
**test.html**
<form>
<label>  name </label><input type="text" name="testname" />
</form>
...