Как создать плавающую форму регистрации div на JavaScript
Я создаю сайт, на каждой странице которого будет ссылка «Войти / Зарегистрироваться». Каждый раз, когда кто-то нажимает на эту ссылку, я хочу, чтобы форма регистрации на основе JavaScript / div всплывала поверх содержимого со ссылкой, чтобы «закрыть» ее, если они захотят.
Я также хочу, чтобы div отображался рядом с положением их мыши, то есть, если они нажимают ссылку около середины страницы, она должна отображаться около середины, и им не нужно полностью прокручивать до сверху, чтобы увидеть это. (Чтобы уточнить, возможно, он должен автоматически определять координаты мыши или иметь способ указать координаты (x, y).)
Я сам хороший разработчик JavaScript, но не эксперт, поэтому я уверен, что некоторые библиотеки будут делать это лучше, чем я. Есть ссылки / руководства, которыми можно поделиться?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Взгляните на jQuery Thickbox.
http://jquery.com/demo/thickbox/
Может потому, что Thinkbox предназначен для показа картинок
Толстый ящик предназначен для любого модального содержимого Антонио.
-1 Только ссылка и ссылка мертва.
Может быть, он переехал сюда: codylindley.com/thickbox
Вы также можете отобразить страницу входа в новое окно со скрытой панелью инструментов, адресной строкой и т. д. Вы можете установить расположение окна, используя координаты мыши, полученные из события щелчка мыши на вашей главной странице.
Вы можете попробовать это:
<div id = "loginBox"><!-- insert content here--></div><br />
<style type = "text/css"><br />
#loginBox { <br/>
display:none; <br/>
position:absolute; <br/>
/* left and top */<br/>
}<br/>
</style><br/>
<script type = "text/javascript"><br/>
function showLoginBox() { document.getElementById('loginBox').style.display = 'block'; }<br/>
</script><br/>
<a href = "#" onclick = "showLoginBox()" >Show login box</a><br />
Это должно сработать, если вам просто нужно простое решение.
Просто имейте в виду, что это не будет перемещаться по спискам выбора в IE 5, IE 5.5 или IE6.
о, и я думаю, вы хотите установить его на блокировку, а не на
Я пробовал Thickbox, но он всегда показывал пустое поле, а не содержимое div, которое я хотел отобразить. Итак, я нашел Ibox, и он отлично сработал :)
Сегодня есть гораздо лучший подход. Это называется диалог jQuery: http://jqueryui.com/demos/dialog/
Взгляните на образец модельной формы: http://jqueryui.com/demos/dialog/#modal-form
+1, легко с Thickbox. Не уверен, почему это было отклонено.