弹出窗体使用html/javascript/css

Question

我必须在弹出窗口中打开一个html表单.弹出窗口不应该是一个窗口(通常使用window.open()创建),而应该像下面的链接中出现的那样(在firefox中打开) http://www.w3schools.com/js/tryit.asp ？filename = tryjs_prompt 但是这段代码的问题在于,我无法将"请输入你的名字"中的内容弹出内容更改为我的html表单.在搜索时,我发现在那里我们无法更改弹出式提示框的内容,唯一的解决方案是创建自己的弹出窗口......难道没有更简单的解决方案吗？

谢谢....

Answer 1

请尝试jQuery UI对话框

这是表单演示

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

Answer 2

现场演示

听起来你可能想要一个灯箱,因为你没有用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;
}