使用 html/javascript/css 的弹出表单

popup form using html/javascript/css

提问by Neetu Pant

I have to open an html form in a popup. Popup should not be a window (that is usually created using window.open() ), instead it should be like one appeared in the link below (open in firefox) http://www.w3schools.com/js/tryit.asp?filename=tryjs_promptBut the problem with this code is that, I cannot change the content popup content from "Please enter your name" to my html form. While searching, I found that there we CANNOT change the content of popup Prompt Box and the only solution is to create your own popup... Isn't there any easier solution ?

我必须在弹出窗口中打开一个 html 表单。弹出窗口不应该是一个窗口（通常使用 window.open() 创建），而是应该像下面链接中出现的窗口（在 firefox 中打开） http://www.w3schools.com/js/tryit.asp ?filename=tryjs_prompt但此代码的问题在于，我无法将内容弹出内容从“请输入您的姓名”更改为我的 html 表单。在搜索时，我发现我们无法更改弹出提示框的内容，唯一的解决方案是创建自己的弹出窗口......没有更简单的解决方案吗？

Thank you....

谢谢....

回答by mplungjan

Please try jQuery UI dialog

请尝试jQuery UI 对话框

Here is the forms demo

这是表格演示

For mobile use, have a look at jQuery Mobile - Creating dialogs

对于移动使用，请查看jQuery Mobile - 创建对话框

回答by Loktar

Live Demo

现场演示

Sounds like you might want a light box,and since you didnt tag your question with jQuery included is a pure JS example of how to make one.

听起来您可能想要一个灯箱，而且由于您没有使用包含 jQuery 的标签来标记您的问题，这是一个关于如何制作灯箱的纯 JS 示例。

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;
}

Markup

标记

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

CSS

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;
}

回答by Quentin

But the problem with this code is that, I cannot change the content popup content from "Please enter your name" to my html form.

但是此代码的问题在于，我无法将内容弹出内容从“请输入您的姓名”更改为我的 html 表单。

Umm. Just change the string passed to the prompt()function.

嗯。只需更改传递给prompt()函数的字符串。

While searching, I found that there we CANNOT change the content of popup Prompt Box

在搜索时，我发现我们无法更改弹出提示框的内容

You can't change the title. You can change the content, it is the first argument passed to the prompt()function.

你不能改变标题。您可以更改内容，它是传递给prompt()函数的第一个参数。

回答by Rahul Jain

Look at easiest example to create popup using css and javascript.

查看使用 css 和 javascript 创建弹出窗口的最简单示例。

1. Create HREF link using HTML.
2. Create a popUp by HTML and CSS
3. Write CSS
4. Call JavaScript mehod

1. 使用 HTML 创建 HREF 链接。
2. 通过 HTML 和 CSS 创建一个弹出窗口
3. 编写 CSS
4. 调用 JavaScript 方法

See the full example at this link http://makecodeeasy.blogspot.in/2012/07/popup-in-java-script-and-css.html

请参阅此链接的完整示例 http://makecodeeasy.blogspot.in/2012/07/popup-in-java-script-and-css.html

回答by Raj Sharma

Here is a resource you can edit and use Download Source Code or see live demo here http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

这是您可以编辑和使用的资源 下载源代码或在此处查看现场演示 http://purpledesign.in/blog/pop-out-a-form-using-jquery-and-javascript/

Add a Button or link to your page like this

像这样添加一个按钮或链接到您的页面

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

“#inline” here should be the “id” of the that will contain the form.

这里的“#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>

Include these script to listen of the event of click. If you have an action defined in your form you can use “preventDefault()” method

包括这些脚本来监听点击事件。如果您在表单中定义了一个动作，您可以使用“preventDefault()”方法

<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>

You can add anything you want to do in your PHP file.

您可以在 PHP 文件中添加任何您想做的事情。

回答by sunil_mlec

Just replacing "Please enter your name" to your desired content would do the job. Am I missing something?

只需将“请输入您的姓名”替换为您想要的内容即可。我错过了什么吗？

回答by Venkat Raghavan G

There are plenty available. Try using Modal windows of Jquery or DHTML would do good. Put the content in your div or Change your content in div dynamically and show it to the user. It won't be a popup but a modal window.
Jquery's Thickboxwould clear your problem.

有很多可用的。尝试使用 Jquery 或 DHTML 的模态窗口会很好。将内容放入 div 或动态更改 div 中的内容并将其显示给用户。它不会是一个弹出窗口，而是一个模态窗口。
Jquery 的Thickbox会解决你的问题。