Форум PHP программистов > Fancybox модальное окно

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Jokeryuga

11.03.2012 - 13:16

Доброго времени суток. Смотрел как сделать модальное окно со своим контентом при помощи fancybox, но так и не нашёл нужного мне( а нужно мне, чтобы после ввода в поля кредитного калькулятора значений, результат выводился в виде таблицы в этом самом модальном окне. на сегодняшний день реализовано это с помощью css но хотелось бы с fancybox разобраться...помогите пожалуйста.
приведу код с формой и с обработкой, которая сейчас имеется

	  <style type="text/css">

			#calcRes {top:120px;left:0;width:100%;display:none;z-index:20000}

			#calcRes div {postion:relative;width:80%;margin:0 auto;background:#eee;border:4px solid #aaa;padding:8px}

		</style>

		 <form action="/addons/shared_addons/themes/interchange/data/text.php" method="POST" onsubmit="formHandler(this);return false">

		 <div class="fields"><label for="bank"><b>Выберите банк из списка: </b></label>'.$content.'</br><p></p></div>

		 <form action="kalkuljator/calc_res" method="POST">

		 <div class="fields"><label for="srok"><b>Срок кредитования(месяцы):</b></label> <input type="mytext" name="srok" id="srok" /></br><p></p></div>

         <div class="fields"><label for="summ"><b>Сумма кредита:</b></label> <input type="mytext" name="summ" id="summ" /></br><p></p></div>

         <input type="submit" value="Рассчитать" />

         </form>

		 <script type="text/javascript">

			function formHandler(formEl) {

			

			proverka = true;

			re = /^\d+$/;

			if (formEl.srok.value <= 0 || formEl.srok.value == "" || formEl.srok.value*1 != Math.abs(formEl.srok.value) || !re.test(formEl.srok.value))

			{

			 alert("Срок кредитования введён неверно!");

			 proverka = false;

			}

			

			if (formEl.summ.value <= 0 || formEl.summ.value == "" || formEl.summ.value*1 != Math.abs(formEl.summ.value) || !re.test(formEl.summ.value))

			{

			 alert("Сумма кредита введена неверно!");

			 proverka = false;

			}

			

			if(proverka == true)

				{

				var param=$(formEl).serializeArray();

				

				$.post(formEl.action, param, function(data){

					

					calcResEl = document.createElement(\'div\');

					document.body.appendChild(calcResEl);

					calcResEl.id = \'calcRes\';

					calcResEl.appendChild(document.createElement(\'div\'));

		

					$(\'#calcRes div\').html(data);

					$(\'#calcRes\').css({position:\'absolute\',display:\'block\',opacity:0});

					$(\'#calcRes\').animate({opacity:1},500);

				});

				}

				else return false;

			};

		</script>

Спустя 1 час, 12 минут, 3 секунды (11.03.2012 - 13:28) Jokeryuga написал(а):

как понял пройдёт всё только при нажатии ссылки...сделал так:

<form action="/pyrocms/addons/shared_addons/themes/interchange/data/text.php" method="POST" name="form1">

		 <div class="fields"><label for="bank"><b>Выберите банк из списка: </b></label>'.$content.'</br><p></p></div>

		 <form action="kalkuljator/calc_res" method="POST">

		 <div class="fields"><label for="srok"><b>Срок кредитования(месяцы):</b></label> <input type="mytext" name="srok" id="srok" /></br><p></p></div>

         <div class="fields"><label for="summ"><b>Сумма кредита:</b></label> <input type="mytext" name="summ" id="summ" /></br><p></p></div>

         <input type="submit" value="Рассчитать" />

		 
        <a href="/pyrocms/addons/shared_addons/themes/interchange/data/text.php" class="modalbox" onclick="document.form1.submit()">send form</a>
         </form>

но выводится всё на отдельной страничке,а не в окошке. если убрать onclick то всё как должно быть,но естественно параметры с формы не передаются.подскажите!!!

Спустя 22 часа, 55 минут, 15 секунд (12.03.2012 - 12:23) Jokeryuga написал(а):

помогите кто нибудь!!!
вот тут накопал,что правильно делать так:

<form action="/pyrocms/addons/shared_addons/themes/interchange/data/text.php" method="POST" name="form1" id="form1">

		 <div class="fields"><label for="bank"><b>Выберите банк из списка: </b></label>'.$content.'</br><p></p></div>

		 <form action="kalkuljator/calc_res" method="POST">

		 <div class="fields"><label for="srok"><b>Срок кредитования(месяцы):</b></label> <input type="mytext" name="srok" id="srok" /></br><p></p></div>

         <div class="fields"><label for="summ"><b>Сумма кредита:</b></label> <input type="mytext" name="summ" id="summ" /></br><p></p></div>

         <input type="submit" value="Рассчитать" />

        
         </form>

		 <a href="#" class="modalbox" onclick="document.form1.submit();">send form</a>

но почему то опять же окно не открывается(

Быстрый ответ:

Здесь расположена полная версия этой страницы.