Отобразить html форму через JS - JavaScript, Ajax

{Shadowevil} · 12.03.2013, 22:21

Здравствуйте! Избороздил просторы интернета, но, к сожалению, решения не нашел.
Проблема стоит следующая:
Есть у меня обычная html форма, но скрытая:

Код:

<div hidden="enter" id="enter" name="enter"> 
<form enctype='multipart/form-data' method='post' action='#' name='login'>
...
 <input type='text' name='user_name' class='input' /><br />
...
 </form>
</div>

Есть у меня на страничке кнопка, по клику на которой открывается модальное окно помощью jquery
скрипт:

Код:

(function($){

$.fn.modalWindow=function(options){

 //НАСТРОЙКИ ПО УМОЛЧАНИЮ
 $settings=$.extend({
  width:230,
  height:230
 },options);

 return $(this).click(function(){

 //ФОН ПОД ВСПЛЫВАЮЩИМ ОКНОМ
 $("<div class='background'></div>")
 .appendTo("body");

 //СОДЕРЖИМОЕ ВСПЛЫВАЮЩЕГО ОКНА
 var $content="";
 
 //ВСПЛЫВАЮЩЕЕ ОКНО
 $("<div class='modalwindow'></div>")
 .css({
  "width":$settings.width+"px",
  "height":$settings.height+"px",
  "top":($(window).height()/2-$settings.height/2)+"px"/*,
  "left":($(window).width()/2-$settings.width/2)+"px"*/
 })
 .append($content).appendTo("body")
 $(".log-frm-close").hover(function(){
	$(this).find("img").attr('src','img/close_active.png');
 },function(){
	$(this).find("img").attr('src','img/close.png');
 })
 $(".log-frm-close").click(function(){
  //СКРЫТИЕ С ЭКРАНА МОДАЛЬНОГО ОКНА
  $(".background").hide().remove();
  $(".modalwindow").hide().remove();
 })
 $(".background").click(function(){
  $(".background").hide().remove();
  $(".modalwindow").hide().remove();
 })
 
});

}

})(jQuery);

мне надо, чтобы когда появляется модальное окно, то эта форма открывалась в нем, т.е. $content+= что-то

если пишу $content+=document.getElementById(' id'); то в модальном окне появляется надпись "[object HTMLDivElement]", а надо чтобы элементы появились ...
Если пишу

Код:

$content+=<form enctype='multipart/form-data' method='post' action='#' name='login'>
...
 <input type='text' name='user_name' class='input' /><br />
...
 </form>

то все окей, отображается форма как и надо, но мне так не надо ...

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

ADSoft · 13.03.2013, 09:01

вообще не совсем понятно .. где это $content и что это такое .... полный код как бы не мешало посмотреть

{Shadowevil} · 13.03.2013, 09:42

Цитата:

Сообщение от ADSoft

вообще не совсем понятно .. где это $content и что это такое .... полный код как бы не мешало посмотреть

$content - это содержимое модального окна, прописывается в скрите

Код:

...
//СОДЕРЖИМОЕ ВСПЛЫВАЮЩЕГО ОКНА
 var $content="";
...

полный код вкратце выглядит примерно так:
содержимое хтмл страницы:

Код HTML:

<html>
<head>
<script type="text/javascript" src="jquery.modalwindow.js"></script>
<script>
$(document).ready(function(){
$("#modalwindow").modalWindow({
width:230,
height:230
});
});
</script>
</head>
<body>
<a href="#" id="modalwindow">Открыть модальное окно</a>
 
....
....
 
<div hidden="enter" id="enter" name="enter"> 
<form enctype='multipart/form-data' method='post' action='#' name='login'>
			<div class='login-form'>
				<div id='log-frm-name'>
					Авторизация:
				</div>
				<div class='log-frm-close'>
					<a href='#' class="close-reveal-modal"><img src='img/close.png' /></a>
				</div>
				<div id='input-name'>
					<ul id='input-label'>
						<li>Логин:</li>
						<li>Пароль:</li>
					</ul>
				</div>
				<div id='input'>
					<input type='text' name='user_name' class='input' /><br />
					<input type='password' name='user_pass' class='input' /><br />
					<input type='checkbox' class='styled' name='remember' /><br />
					<div class='log-but'><a href='#' >Войти</a></div><br />
						<a href='#' class='log-frm-s'>Напомнить пароль</a>
				</div>
			</div>
		</form>
</div>
</body>
</html>

текст скрипта jquery.modalwindow.js:

Код:

(function($){
 
$.fn.modalWindow=function(options){
 
 //НАСТРОЙКИ ПО УМОЛЧАНИЮ
 $settings=$.extend({
  width:230,
  height:230
 },options);
 
 return $(this).click(function(){
 
 //ФОН ПОД ВСПЛЫВАЮЩИМ ОКНОМ
 $("<div class='background'></div>")
 .appendTo("body");
 
 //СОДЕРЖИМОЕ ВСПЛЫВАЮЩЕГО ОКНА
 var $content="";
 
 //ВСПЛЫВАЮЩЕЕ ОКНО
 $("<div class='modalwindow'></div>")
 .css({
  "width":$settings.width+"px",
  "height":$settings.height+"px",
  "top":($(window).height()/2-$settings.height/2)+"px"/*,
  "left":($(window).width()/2-$settings.width/2)+"px"*/
 })
 .append($content).appendTo("body")
 $(".log-frm-close").hover(function(){
    $(this).find("img").attr('src','img/close_active.png');
 },function(){
    $(this).find("img").attr('src','img/close.png');
 })
 $(".log-frm-close").click(function(){
  //СКРЫТИЕ С ЭКРАНА МОДАЛЬНОГО ОКНА
  $(".background").hide().remove();
  $(".modalwindow").hide().remove();
 })
 $(".background").click(function(){
  $(".background").hide().remove();
  $(".modalwindow").hide().remove();
 })
 
});
 
}
 
})(jQuery);

ADSoft · 13.03.2013, 09:57

1. переменные в JS не нуждаются в $ .... просто var content = "";
2. получить содержимое див - = $("#enter").html();
итого var content= $("#enter").html();

{Shadowevil} · 13.03.2013, 10:19

спасибо -_- пойду ударюсь

Naive · 13.03.2013, 13:20

Цитата:

Сообщение от ADSoft

1. переменные в JS не нуждаются в $ .... просто var content = "";

Иногда префикс $ юзается для обозначения типа переменной как объекта jQ — чтобы не было путаницы)

Код:

var $modal = $('#modal'),
    modal = new Modal();

к примеру...

13.03.2013, 09:01	#2
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,160	вообще не совсем понятно .. где это $content и что это такое .... полный код как бы не мешало посмотреть Сайты, приложения, автоматизация в широком смысле слова

13.03.2013, 09:57	#4
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,160	1. переменные в JS не нуждаются в $ .... просто var content = ""; 2. получить содержимое див - = $("#enter").html(); итого var content= $("#enter").html(); Сайты, приложения, автоматизация в широком смысле слова

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как через js передать переменную из ex1.html в ex2.html?	Andrody	JavaScript, Ajax	5	06.08.2012 11:23
Как отобразить спроецированный в память Bitmap в форму.	Matou	Win Api	2	21.05.2011 20:49
Как отобразить на форме содержимое HTML-документа?	Alexpol	Общие вопросы Delphi	13	09.01.2011 22:39
Отобразить форму на ПЗ	RIO	Общие вопросы Delphi	0	06.02.2010 21:15
Как отобразить в ProgressBar процесс отправки писем через SMTP	leon2009	Работа с сетью в Delphi	15	20.03.2009 21:26

13.03.2013, 10:19	#5
{Shadowevil} Пользователь Регистрация: 15.01.2009 Сообщений: 52	спасибо -_- пойду ударюсь