Подскажите яваскрипт такой чтобы при нажатии на кнопку заказать или отправить сообщение вылезала форма с полями,а фон сайта при этом становился черным.То есть в этой форме допустим 3 поля,которые уходят на почту администрации.В этих полях бы человек указывал свои контактные данные ,Имя фамилию,и другие.Знаете так чтобы можно было отправить сообщение не перезагружая страницу.
может вам подойдет модальное окно. Почитать можно по ссылке http://deseloper.org/read/2008/04/a-simple-modal/ Используется с jQuery.
приведу пример использования с использованием 3-файлов 1)файл main.php-это файл где у вас есть кнопка, при нажатии на которую должна всплывать форма заказа PHP: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/js/jquery/jquery.form.js"></script> </head> <style type="text/css"> .modal-overlay { position:fixed; top:0; right:0; bottom:0; left:0; height:100%; width:100%; margin:0; padding:0; background:#fff; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; z-index:101; } .modal-window { position:fixed; top:50%; left:50%; margin:0; padding:0; z-index:102; } .close-window { position:absolute; width:32px; height:32px; right:8px; top:8px; background:transparent url('/images/close-button.png') no-repeat scroll right top; text-indent:-99999px; overflow:hidden; cursor:pointer; opacity:.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } .close-window:hover { opacity:.99; filter: alpha(opacity=99); -moz-opacity: 0.99; } </style> <script language="javascript" type="text/javascript"> var modalWindow = { parent:"body", windowId:null, content:null, width:null, height:null, close:function() { $(".modal-window").remove(); $(".modal-overlay").remove(); $.ajax({ url: "closepopup.php", }); }, open:function() { var modal = ""; modal += "<div class=\"modal-overlay\"></div>"; modal += "<div id=\"" + this.windowId + "\" class=\"modal-window\" style=\"width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;\">"; modal += this.content; modal += "</div>"; $(this.parent).append(modal); $(".modal-window").append("<a class=\"close-window\"></a>"); $(".close-window").click(function(){modalWindow.close();}); $(".modal-overlay").click(function(){modalWindow.close();}); } }; var openMyModal = function(source) { modalWindow.windowId = "myModal"; modalWindow.width = 780; modalWindow.height = 600; modalWindow.content = "<iframe width='780' height='600' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'></iframe>"; modalWindow.open(); }; function closeIframe() { $(".modal-window").remove(); $(".modal-overlay").remove(); } </script> <body> <?php print "<input type=\"button\" value='Order' onclick=\"openMyModal('myform.php')\">"; ?> </body> </html> 2) файл -myform.php-это файл выводящий форму PHP: <script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery/jquery.form.js"></script> <script language="javascript" type="text/javascript"> $(function() { $("#submit_button").click(function() { // validate and process form here var order_id = $("#id").val(); if (order_id == "") { alert('id is required!') } var order_item = $("#item").val(); if (order_item == "") { alert('order_item is required!') } var order_quantity = $("#quantity").val(); if (order_quantity == "") { alert('order_quantity is required!') } if(order_id == "" || order_item == "" || order_quantity == "") { return false; } url='save.php?order_id='+order_id+'&order_item='+order_item+'&order_quantity='+order_quantity; $.getJSON(url, null,function(data) { if(data.order_saved==0) { alert("Your order failed!") } else { alert('Your order saved '); window.parent.closeIframe(); } }); return false; }); }); </script> <form> <table border=1> <tr> <td>Order N</td> <td><input type="text" name="order_id" id="id"> </td> </tr> <tr> <td>Order Item</td> <td><input type="text" name="order_item" id="item"> </td> </tr> <tr> <td>Quantity</td> <td><input type="text" name="order_quantity" id="quantity"> </td> </tr> </table> <input type="submit" value="Order" id="submit_button" /> </form> <a href="javascript: window.parent.closeIframe()">Cancel</a> 3) файл сохранения введенного заказа-save.php PHP: <?php if(isset($_GET['order_id']) and isset($_GET['order_item']) and isset($_GET['order_quantity'])) { //проверка и сохранение данных // если все ОК, то $data['order_saved']=1; // если нет $data['order_saved']=0; $data=array(); $data['order_saved']=1;// или $data['order_saved']=0 echo json_encode($data); } Схема работы такая: 1)При нажатии кнопки вызова формы заказа вызывается функция создания модального окна(openMyModal). В качестве аргумента передается название скрипта формы заказа(myform.php) 2) при нажатии кнопки сохранения заказа проверяются все ли поля заполнены и если они заполнены отправляется getJSON запрос на сервер. В качестве скрипта обработки указывается скрипт save.php, который записывает заказ в базу и информирует клиента, об успехе или неуспехе операции