如何打开一个弹出窗口并锁定 HTML 中的剩余屏幕？答案

【问题标题】：How to open a popup with lock the remain screen in HTML?如何打开一个弹出窗口并锁定 HTML 中的剩余屏幕？
【发布时间】：2012-05-15 11:48:36
【问题描述】：

我正在尝试在我的屏幕上打开一个弹出窗口，我可以在其中锁定剩余屏幕，以便用户只能从我的弹出窗口中选择某些内容或取消弹出窗口。基本上我需要将一些值从 jsp 表单传递到我的弹出窗口，我已经完成了，但我还需要锁定我目前无法做到的剩余屏幕。谢谢。

这就是我调用 jQuery 的方式

 <a href="#" class="modalInput"  rel="#prompt">Download</a>

这是我的脚本

<script> 
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
    mask: {
        color: '#555555',
        loadSpeed: 200,
        opacity: 0.9
},
closeOnClick: false
});

var buttons = $("#yesno button").click(function(e) {
    var yes = buttons.index(this) === 0;
    triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
});

$("#prompt form").submit(function(e) {
        triggers.eq(1).overlay().close();
        var input = $("input", this).val();
        triggers.eq(1).html(input);
        return e.preventDefault();
    });
});
</script>

这是我的表格

<font  face=arial  bgcolor=""><b><center>
<form id="myForm" name="myForm" method="post" action="SentMail" onsubmit="return validateForm(this)">   
<div class="modal" id="prompt" > 
<div id="">
                    <table width="100%" border="0" cellspacing="0" cellpadding="5" align="center">
                      <tr>
                        <td align="right" valign="middle">&nbsp;</td>
                        <td align="right" valign="middle"><span style="color:#F00">*</span> Mandotary Field</td>
                      </tr>
                      <tr>
                        <td width="28%" align="right" valign="middle"><strong>Name:</strong><span style="color:#F00">*</span></td>
                        <td width="72%" align="left" valign="middle"><label for="textfield"></label>
                          <div class="out-border">
                          <input name="name" type="text" class="comm-text" id="name" style="width:250px" placeholder="Name"/></div></td>
                      </tr>
                      <tr>
                        <td align="right" valign="middle"><strong>Email:</strong><span style="color:#F00">*</span></td>
                        <td align="left" valign="middle"><label for="textfield2"></label>
                          <div class="out-border">
                          <input name="Email" type="text" class="comm-text" id="Email" style="width:250px" placeholder="Email"/></div></td>
                      </tr>
                      <tr>
                        <td align="right" valign="middle"><strong>Contact No.:</strong></td>
                        <td align="left" valign="middle"><label for="textfield2"></label>
                          <div class="out-border">
                          <input name="contact" type="text" class="comm-text" onkeypress="return isNumberKey(event)" maxlength="10" id="contact" style="width:250px" placeholder="Contact Number"/></div></td>
                      </tr>

                      <tr>
                        <td align="left" valign="middle">&nbsp;</td>
                        <td align="left" valign="middle"><input type="submit" name="signIn" value="Submit" class="button green"> </input>
                      <input type="button" name="signIn" value="Close" class="close"> </input></td>
                      </tr>

                    </table>
                  </div></div>
    </form>
</center></b></font>

【问题讨论】：

坏主意，用户会讨厌这个并可能离开您的网站
您正在寻找的是一个模态弹出窗口
你在使用 jQuery UI 吗？如果是这样，您可以使用 模态对话框（如果您正在使用其他东西...只需选择一个随机模态对话框实现）。
我需要在此处执行类似etcproceedings.org/paper/… 的操作，当您单击“下载论文”时，系统会要求您输入您的电子邮件 ID 和姓名。我需要做这样的事情
@Adriano 是的，我正在使用 JQuery，但我无法通过它发送我的值

标签： html

【解决方案1】：

您可能想查看jQuery UI - 特别是Dialog 和modal 选项。

【讨论】：

我正在使用 jQuery，但它不允许将值从我的 jsp 页面发送到该对话框。
那么你在标记中做错了什么。 JSP 是一种服务器语言，不会对您的 JavaScript 标记产生任何影响，因为它是在浏览器中运行的。

【解决方案2】：

我猜你正在使用“window.open”。使用 window.showModalDialog

【讨论】：