在 JavaScript 中定位提示弹出窗口

2024-06-19

我有一个如下所示的 JavaScript 提示,我想将提示放在屏幕中心。如何使用 javascript 做到这一点?

function showUpdate() {     
    var x;    
    var name=prompt("Please enter your name","");

    if ( name != null ) {
      x="Hello " + name + "! How are you today?";
      alert("Input : " + name );          
    }

}

我就是这样称呼它的:

<a onclick = "showUpdate() " style="vertical-align: middle;" class="parent" href=""><span>5. Missed P/U Comments</span></a>

它可以找到,除了提示符转到左上角IE并集中在Firefox但我需要相同的解决方案才能在两种浏览器中工作。


The prompt (and alert) 弹出窗口的实现方式有所不同,具体取决于您使用的浏览器。这是因为弹出窗口是浏览器功能,它们不是 JavaScript 对象或类似的东西。 (就像每个浏览器的控制台都不同一样,这取决于实现。)

如果您确实希望提示的位置/样式保持一致,则必须构建自己的提示。

最简单的方法是使用像这样的库jQueryUI http://jqueryui.com/dialog/#modal-form.

另一方面,您可以自己构建它:

document.getElementById('showPromptButton').addEventListener('click', showSprompt);
document.getElementById('promptButton').addEventListener('click', submitPrompt);
var prompt = document.getElementById('myPrompt');
var promptAnswer = document.getElementById('promptAnswer');

function showSprompt() {
    promptAnswer.value = ''; // Reset the prompt's answer
    document.getElementById('promptQuestion').innerText = "What's your question?"; // set the prompt's question
    prompt.style.display = 'block'; // Show the prompt
}

function submitPrompt() {
    var answer = promptAnswer.value; // Get the answer
    prompt.style.display = 'none';   // Hide the prompt
    console.log(answer);
}
#myPrompt{
  display:none;
  /* Style your prompt here. */
}
<input id="showPromptButton" type="button" value="Show Prompt" />
<div id="myPrompt" class="proptDiv">
  <span id="promptQuestion"></span>
  <input id="promptAnswer" type="text" />
  <input id="promptButton" type="button" value="Submit" />
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 JavaScript 中定位提示弹出窗口 的相关文章

随机推荐

  • Android NDK C++“wstring”支持

    我有用 C 编写的源代码 lib 现在我想在 Android NDK 项目 NDK 6 中编译并使用相同的源代码 lib 我能够编译大多数 C 文件 除了基于 std wstring 的功能 在 Application mk 中 当我指定时
  • 如何制作无限的jscrollpane?

    我之前已经实现过拖动滚动 但是创建无限滚动窗格的最佳方法是什么 当然不会有任何滚动条 我将实现拖动滚动 我想做的是在无限表面上实现动态加载 EDIT 当然 它实际上不会是无限的 我想问如何伪造它 您可以执行以下操作 AdjustmentCl
  • 我的 Reporting Services 2008 Web 服务 URL 仅显示目录列表

    我的机器上设置了报告服务 我可以访问http localhost 8080 Reports SQL2008 http localhost 8080 Reports SQL2008报告管理器工作正常 当我尝试访问 Web 服务 URL htt
  • 意外的查询结果

    为什么我从 sql server 得到以下结果 SELECT 12 C1 CONVERT int C2 CASE WHEN THEN equal ELSE not equal END C3 Sql Server Fiddle 演示 http
  • 打印 jasper 文件时执行报表 SQL 语句时出错

    我修改了一个旧项目 但无法确定这段代码有什么问题 使用下面的 jrxml它创造 jasper文件 当我打印 jasper 文件时 使用此代码JasperPrint jasperPrint JasperFillManager fillRepo
  • Android Realm.io:行/对象不再有效

    这是我的删除功能 它确实找到了workday1 object public static void delete Context context Workday workday Realm realm getRealm context re
  • 使用不带参数的 Split() 时,默认分隔符是什么?

    所以我看了看String Split 今天 C 中的方法 我意识到你也可以向它传递零参数 这是我从未考虑过的 使用时默认的分隔符是什么Split 没有任何参数 如果没有值 则为空白 来源自here https msdn microsoft
  • NSCalendar 返回明年第一周上周一的错误日期

    我使用下面的代码使用随机日期来计算上周一 哪个工作文件但我的代码在明年日期中断 下面是相同的代码 NSDate date NSDate dateWithTimeIntervalSince1970 1483620311 228 NSLog c
  • MATLAB:在不使用循环的情况下提取矩阵的多个部分

    我有一个巨大的 2D 矩阵 我想从中提取 15 个不同的 100x100 部分 我有两个向量 x 和 y 其中保存了零件的左上角索引 我用过这样的东西 result cam1 x 1 end x 1 end 99 y 1 end y 1 e
  • 添加边后更新最大流量

    考虑我们有一个网络流量 并使用 Edmond Karp 算法 我们已经拥有网络上的最大流量 现在 如果我们向网络添加任意边 具有一定容量 更新最大流量的最佳方法是什么 我正在考虑更新关于新边缘的残差网络 并再次寻找增强路径 直到找到新的最大
  • Python在没有pandas的情况下解码excel表

    我正在尝试在 python 中读取 excel 文件而不使用pandas or xlrd 我一直在尝试将结果转换为bytes to utf 8没有任何成功 xls 文件中的数据 colA colB colC spc 1D0 20190705
  • 终端关闭时 bash 收到的信号

    使用 trap 来捕获信号 如下所示 i 1 while i lt 33 do trap echo i gt gt log txt i done 并强行关闭终端 那么log txt中的内容就是 redhat linux下 1 18 1 17
  • Java元数据读写

    是否可以以通用方式 对于所有图像类型 在 Java 中读取和写入元数据 我找到了一些示例 但它们总是特定的 例如 JPEG 或 PNG 我需要一些足够通用的东西 而不是到处都有 if else 语句 我不想重写源代码 但这是一个很好的例子
  • vscode 中正则表达式的不完整量词

    我正在尝试为对象的开头创建一个正则表达式 以便我可以用单个替换完整的块 在vscode的查找和替换中 My Regex id oid 0 9 product id 0 9 我的示例输入 id oid 973 product id 973 p
  • Typescript:如何在自定义过滤器中使用角度 $filter

    如何在自定义过滤器中使用 Angular filter 如何注入 filter依赖 module Filters export class CustomFilter public static Factory return function
  • Flask-Login 支持角色吗?

    如果没有 是否有任何项目在 Flask Login 中添加了此功能 否则 从 Flask Login 迁移到 Flask User 似乎有点令人畏惧 否则 是否有任何从 Flask Login 迁移到 Flask User 的方向 再次 为
  • Android系统每个应用程序的通知限制

    这可能偏离主题 但我找不到任何相关内容 Android应用程序可以显示的通知数量有限制吗 我在收到 100 条通知后遇到问题 没有文件明确说明这一点 注意 显示 100 条通知并不是一个好主意 但由于某些原因这是必需的 In API23 包
  • 无法验证包:721772200.itmsp

    我写这篇文章是因为我有一个严重的问题 我在cartoonsmart 网站上购买了Commander Cool 游戏 然而 一个严重的问题发生了 iTune Connect 验证无法接受该申请 我尝试从两个不同的开发者帐户发布它 但错误仍然发
  • Laravel nova diffForHumans 日期时间

    我对用户有字段last active 我想用 diffForHumans 或显示时间time from now来自 Moment js 我怎样才能做到呢 现在我只使用 DateTime make Activiy last active gt
  • 在 JavaScript 中定位提示弹出窗口

    我有一个如下所示的 JavaScript 提示 我想将提示放在屏幕中心 如何使用 javascript 做到这一点 function showUpdate var x var name prompt Please enter your na