3

我想知道是否有一种方法可以在 JavaScript 中创建一个弹出对话框而不使用alert(), confirm(), prompt()或window.open()

原因是因为我希望能够在对话框中放置任何内容。任何内容。（例如，文本框、div、格式化的内容，或者我希望并具有任何文本的许多输入按钮），并且没有一个alert(), confirm(),orprompt()允许您这样做。prompt()只允许一个文本框。并且alert()只confirm()允许它的预设按钮和纯文本。我不想使用window.open()，因为它会重新定位到不同的 url，或者具有相同功能的相同 url。

另一件事是所有给定的选项都会提醒用户，因此是函数名称alert()，prompt()我想要一些不那么侵入性的东西。

我不想使用 jQuery 插件或制作自己的插件的原因是因为我希望对话框具有操作系统原生的 GUI。

现在，我从未见过任何人使用它，我想说我在网上冲浪和参考方面有足够的经验。因此，如果这是不可能的，那么另一个可接受的答案是拥有一个alert()或confirm()或prompt()带有可自定义的按钮（无论我想要多少标题值）。

编辑：这个请求背后的原因是因为我最近一直在学习涉及 C++ 和 Python 2 的计算机科学课程，它能够通过调用系统 GUI 来做到这一点，但我更喜欢浏览器客户端架构。那我也很好奇。

编辑 2：我不希望使用可以以剧烈方式操作的插件。我感兴趣的是我可以用系统做什么，而不是我可以用hacks做什么。

4

4 回答 4

3

您要求的内容在 JavaScript 中是可能的，但在客户端却不行。在服务器端，您可以在RingoJS和node.js上运行 JavaScript 。

Ringo 可以与 Java 包交互。因此，您基本上可以使用Swing在 JavaScript 中创建 GUI 应用程序。例如：

var {FlowLayout} = java.awt;
var {JButton, JFrame, JLabel} = javax.swing;

var frame = new JFrame("Hello World!");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

var contentPane = frame.getContentPane();
contentPane.add(new JLabel("Hello World!"));
contentPane.add(new JLabel("Press Me!"));
contentPane.setLayout(new FlowLayout);

frame.pack();
frame.setVisible(true);

但是，在客户端，您需要使用库为您创建此类对话框，或者自己滚动。如果您决定自己制作，那么您需要检测用户正在使用的操作系统并相应地设置对话框的样式。

改用 jQuery UI 可能会更好。另外，我认为让您的 Web 应用程序看起来像本机应用程序并不是一个好主意，原因有两个：

  1. 它在所有操作系统和所有配置上看起来都不一样。所以很容易看出你试图让它看起来很原生，这破坏了网站的感觉。而是坚持您网站的主题。
  2. 只使用 jQuery UI 或其他类似的库会更容易。其他任何事情都只是矫枉过正和浪费时间（至少在我看来）。
于 2013-02-10T02:22:50.523 回答
2

您仍然可以使用 jQuery 模态（或任何 JS 模态），但您可以根据用户的平台对它们进行皮肤。然而，UA 检测很容易被欺骗，尤其是在有丰富的扩展和开发工具的情况下。

此外，JS 没有超出视口 4 面的管辖权（除非您从浏览器扩展/插件中获得优势，否则会带来额外的麻烦并且大部分时间是有限的）。不能直接用 JS 调用原生操作。

总而言之，我会说这是可能的，但非常棘手。

于 2013-02-10T02:03:46.157 回答
0

为什么不直接查找一个可定制的 javascript 插件？这可能是最简单的，而不是自己编码。但供您参考：

    <!--//create a div that has the contents of what you want-->
    <div id="popUpDialog" style='display: none; background-color: #999; position: absolute; top: 300px; left: 200px; width: 120px; height: 120px;'>some Text here<input type='radio' /><br /> Options 2<input type='radio' /></div>

    <!--//create an event to cause this popup to show up somewhere... i.e. a buttons onClick event-->
    <input id='btnTrigger' type='button' value='Show Dialog'></input>
    <input id='btnTrigger2' type='button' value='Close Dialog'></input>
    <script type="text/javascript">
    var el = document.getElementById("btnTrigger");

    el.addEventListener('mousedown', function() {
    var popUp = document.getElementById("popUpDialog");
    popUp.style.display = 'inline-block';
    });

    var el = document.getElementById('btnTrigger2');
    //alert(el);
    el.addEventListener('mousedown', function() {
    var popUp = document.getElementById('popUpDialog');
    popUp.style.display = 'none';
    });
    </script>

这是给你的 jsFiddle http://jsfiddle.net/crislivinitup/9VN7y/

哦，顺便说一句，在这个例子中，我没有将 div 的位置更改为绝对位置，也没有设置背景颜色（这意味着如果它确实弹出，背景将是透明的）。这只是为您提供制作元素弹出窗口的一般概念。

于 2013-02-10T02:21:41.330 回答
0

看看引导程序中的模型对话框，它们看起来很酷:) http://twitter.github.com/bootstrap/javascript.html#modals

于 2013-02-10T02:24:31.230 回答