it-swarm.com.ru

всплывающая форма с использованием html/javascript/css

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

Спасибо....

5
Neetu Pant

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

Вот формы демо

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

19
mplungjan

Live Demo

Похоже, вам может понадобиться лайтбокс, и поскольку вы не пометили свой вопрос включенным 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;
}
17
Loktar

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

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

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

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

1
Quentin

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

0
sunil_mlec

Посмотрите на самый простой пример создания всплывающих окон с использованием 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
Rahul Jain

Вот ресурс, который вы можете редактировать и использовать. Загрузите исходный код или ознакомьтесь с демонстрацией здесь 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
Raj Sharma