всплывающая форма с использованием html / javascript / css - PullRequest
5 голосов
/ 07 июня 2011

Я должен открыть HTML-форму во всплывающем окне.Всплывающее окно не должно быть окном (которое обычно создается с помощью window.open ()), вместо этого оно должно быть таким, как в приведенной ниже ссылке (открыть в Firefox) http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt Но проблема с этим кодом заключается в том,Я не могу изменить всплывающее содержимое с «Пожалуйста, введите ваше имя» в мою HTML-форму.Во время поиска я обнаружил, что там мы НЕ МОЖЕМ изменить содержимое всплывающей подсказки, и единственное решение - создать собственное всплывающее окно ... Нет ли более простого решения?

Спасибо ....

Ответы [ 7 ]

19 голосов
/ 07 июня 2011

Пожалуйста, попробуйте JQuery UI диалог

Вот демоверсия форм

Для мобильного использования, посмотрите на jQuery Mobile - Создание диалогов

17 голосов
/ 07 июня 2011

Демо-версия

Звучит так, будто вам может понадобиться лайтбокс, и, поскольку вы не пометили свой вопрос включенным jQuery, это чистый пример JS, как его создать.

JS

var opener = document.getElementById("opener");

opener.onclick = function(){

    var lightbox = document.getElementById("lightbox"),
        dimmer = document.createElement("div");

    dimmer.style.width =  window.innerWidth + 'px';
    dimmer.style.height = window.innerHeight + 'px';
    dimmer.className = 'dimmer';

    dimmer.onclick = function(){
        document.body.removeChild(this);   
        lightbox.style.visibility = 'hidden';
    }

    document.body.appendChild(dimmer);

    lightbox.style.visibility = 'visible';
    lightbox.style.top = window.innerHeight/2 - 50 + 'px';
    lightbox.style.left = window.innerWidth/2 - 100 + 'px';
    return false;
}

Разметка

<div id="lightbox">Testing out the lightbox</div>
<a href="#" id="opener">Click me</a>

CSS

#lightbox{
    visibility:hidden;
    position:absolute;
    background:red;
    border:2px solid #3c3c3c;
    color:white;
    z-index:100;
    width: 200px;
    height:100px;
    padding:20px;
}

.dimmer{
    background: #000;
    position: absolute;
    opacity: .5;
    top: 0;
    z-index:99;
}
1 голос
/ 07 июня 2011

Но проблема с этим кодом в том, что я не могу изменить всплывающее содержимое с «Пожалуйста, введите ваше имя» в мою HTML-форму.

Ммм. Просто измените строку, переданную в функцию prompt().

При поиске я обнаружил, что мы НЕ МОЖЕМ изменить содержимое всплывающей подсказки

Вы не можете изменить заголовок . Вы можете изменить содержимое, это первый аргумент, переданный функции prompt().

0 голосов
/ 03 января 2014

Вот ресурс, который вы можете редактировать и использовать Скачать исходный код или посмотреть живую демоверсию здесь http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

Добавить кнопку или ссылку на вашу страницу, как это

<p><a href="#inline">click to open</a></p>

«#inline »здесь должен быть« id »того, который будет содержать форму.

<div id="inline">
 <h2>Send us a Message</h2>
 <form id="contact" name="contact" action="#" method="post">
 <label for="email">Your E-mail</label>
 <input type="email" id="email" name="email" class="txt">
 <br>
 <label for="msg">Enter a Message</label>
 <textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
 </form>
</div>

Включите эти скрипты для прослушивания события щелчка.Если в вашей форме определено действие, которое вы можете использовать, вы можете использовать метод «protectDefault ()»

<script type="text/javascript">
 $(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
 $("#email").removeClass("error");
 }

 if(msglen < 4) {
 $("#msg").addClass("error");
 }
 else if(msglen >= 4){
 $("#msg").removeClass("error");
 }

 if(mailvalid == true && msglen >= 4) {
 // if both validate we attempt to send the e-mail
 // first we hide the submit btn so the user doesnt click twice
 $("#send").replaceWith("<em>sending...</em>");
 //This will post it to the php page
 $.ajax({
 type: 'POST',
 url: 'sendmessage.php',
 data: $("#contact").serialize(),
 success: function(data) {
 if(data == "true") {
 $("#contact").fadeOut("fast", function(){
//Display a message on successful posting for 1 sec
 $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
 setTimeout("$.fancybox.close()", 1000);
 });
 }
 }
 });
 }
 });
 });
</script>

Вы можете добавить в файл PHP все, что захотите.

0 голосов
/ 04 октября 2013

Посмотрите на самый простой пример для создания всплывающего окна с использованием CSS и JavaScript.

  1. Создание ссылки HREF с использованием HTML.
  2. Создание всплывающих окон с помощью HTML и CSS
  3. Написать CSS
  4. вызов метода JavaScript

Смотрите полный пример по этой ссылке http://makecodeeasy.blogspot.in/2012/07/popup-in-java-script-and-css.html

0 голосов
/ 07 июня 2011

Просто заменив «Пожалуйста, введите ваше имя» на желаемый контент, вы справитесь.Я что-то упустил?

0 голосов
/ 07 июня 2011

Есть много доступных.Попробуйте использовать модальные окна Jquery или DHTML.Поместите контент в ваш div или динамически измените ваш контент в div и покажите его пользователю.Это будет не всплывающее окно, а модальное окно.
Jquery's Thickbox решит вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...