JavaScript - 如何在不使用alert（）或window.open（）的情况下创建对话框窗口？

I was wondering if there was a way to create a popup dialog in JavaScript without using alert(), confirm(), prompt() or window.open()

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

The reason why is because I want to be able to put anything inside the dialog. Any content. (E.g. a text box, div, formatted content, or however many input buttons I wish and have with whatever text), and none of the alert(), confirm(), or prompt() allows you to do this. prompt() only allows for a text box. And alert() and confirm() only allow it's preset buttons and plain text. I don't want to use window.open() because it relocates to either a different url, or the same url with the same functionality.

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

Another thing is that all of the given options alerts the user, hence the function name alert() and prompt() I want something that's a little less intrusive.

另一件事是所有给定的选项都警告用户,因此函数名称alert()和prompt()我想要的东西有点不那么具有侵入性。

The reason I don't want to use a jQuery plugin or make my own plugin is because I want the dialog to have a GUI native to the OS.

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

Now, I have never seen this used by anyone, and I would say I have adequate experience in web surfing and referencing. So if this is impossible, then another acceptable answer would be to have an alert() or confirm() or prompt() with customize able buttons (however many I want with whatever caption values).

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

EDIT: The reasoning behind this request is because I have been taking computer science courses lately involving C++ and Python 2, which has the ability to do this by invoking the System GUI, but I am more comfortable with the browser-client side architecture. That and I am also just curious.

编辑:这个请求背后的原因是因为我最近参加了计算机科学课程,涉及C ++和Python 2,它有能力通过调用系统GUI来实现这一点,但我更熟悉浏览器 - 客户端架构。那我和我也很好奇。

EDIT 2: I don't wish to use plugins which can be manipulated in drastic ways. I am interested in what I can do with the system not what I can do with hacks.

编辑2:我不希望使用可以大刀阔斧地操纵的插件。我对我能用系统做什么感兴趣,而不是我能用黑客做什么。

4 个解决方案

#1

What you're asking for is possible in JavaScript, but not on the client side. On the server side you have JavaScript running on RingoJS and node.js.

您可以在JavaScript中提出要求,但不能在客户端进行。在服务器端,您在RingoJS和node.js上运行JavaScript。

Ringo can interface with Java packages. So you can essentially using Swing to create GUI applications in JavaScript. For example:

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

On the client side however you'll need to either use a library to create such dialog boxes for you or roll your own. If you decide to make your own then you'll need to detect the operating system the user is using and style your dialog boxes accordingly.

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

You'll probably be better off using jQuery UI instead. Plus I don't think it's a good idea to make your web application look like a native application for two reasons:

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

It won't look the same on all Operating Systems and all configurations. So it's easy to see that you're trying to make it look native which breaks the feel of the website. Instead stick with the theme of your website.

在所有操作系统和所有配置上看起来都不一样。所以很容易看出你试图让它看起来像是原生的,这打破了网站的感觉。而是坚持你的网站的主题。

It's easier to just use jQuery UI or some other library of that sort. Anything else is just overkill and a waste of time (at least according to me).

使用jQuery UI或其他类似的库更容易。其他任何东西都是矫枉过正,浪费时间(至少根据我而言)。

#2

You can still use jQuery modals (or whatever JS modals) but you could skin them according to the user's platform. However, UA detection can easily be spoofed, especially with abundant extensions and dev tools.

您仍然可以使用jQuery模态(或任何JS模态),但您可以根据用户的平台对它们进行换肤。但是,UA检测很容易被欺骗,尤其是使用丰富的扩展和开发工具。

In addition, JS has no jurisdiction beyond the 4 sides of the viewport (unless you get leverage from browser extensions/plugins, an additional hassle and most of the time limited). You can't call native operations with JS directly.

此外,JS除了视口的4个边之外没有管辖权(除非你从浏览器扩展/插件中获得利用,另外一个麻烦并且大部分时间都是有限的)。您不能直接使用JS调用本机操作。

All in all, I'd say it's possible, but very tricky.

总而言之,我认为这是可能的,但非常棘手。

#3

take a look on the model dialogs from bootstrap, they look pretty cool :) http://twitter.github.com/bootstrap/javascript.html#modals

从bootstrap看一下模型对话框,看起来很酷:) http://twitter.github.com/bootstrap/javascript.html#modals

#4

Why don't you just look up a customizable javascript plugin? THat would probably be the easiest, instead of coding it yourself. But for your reference:

为什么不只是查找可自定义的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>

and here is a jsFiddle for you http://jsfiddle.net/crislivinitup/9VN7y/

这里有一个jsFiddle给你http://jsfiddle.net/crislivinitup/9VN7y/

Oh and by the way, in this example I did not change the position of the div to absolute, or set the background-color (which means if it did popup, the background would be transparent). This is just to give you the general concept of making an element popup.

哦,顺便说一下,在这个例子中,我没有将div的位置更改为绝对,或者设置背景颜色(这意味着如果它弹出,背景将是透明的)。这只是为了提供制作元素弹出窗口的一般概念。

#1