如何获得像这样背景不透明的弹出窗口？

Question

我想在我的网站上弹出模式窗口（它是一个背景不透明的窗口）来显示一些数据。请检查下面的图片：

我想使用类似的实现： http://www.smartclient.com/?skin =企业#模态 但我不知道该怎么做。谁能帮我实现这个？我找不到从这里下载哪个文件： http://www.smartclient.com/产品/download.jsp
那不是像 MooTools 或 jQuery 框架之类的东西吗？我无法理解要从他们下载的库中包含哪个文件。 有人可以给我提供一个示例 html 页面代码来做到这一点吗？

另一件事是，我在他们的源代码中看到以下代码：

            isc.IButton.create({
                ID: "touchButton",
                width: 120,
                title: "Touch This"
            });

            isc.Label.create({
                left: 150,
                height: 20,
                contents: "<a href='http://www.google.com' target='_blank'>Open Google</a>"
            });

            isc.IButton.create({
                title: "Show Window",
                top: 35,
                left: 75,
                click : function () {
                    touchButton.setTitle("Can't Touch This");
                    modalWindow.show();
                }
            });

            isc.Window.create({
                ID: "modalWindow",
                title: "Modal Window",
                autoSize:true,
                autoCenter: true,
                isModal: true,
                showModalMask: true,
                autoDraw: false,
                closeClick : function () { touchButton.setTitle('Touch This'); this.Super("closeClick", arguments)},
                items: [
                    isc.DynamicForm.create({
                        autoDraw: false,
                        height: 48,
                        padding:4,
                        fields: [
                                    {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                                    {name: "field2", type: "date"},
                                    {type: "button", title: "Done",
                                     click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
                                ]
                    })
                 ]
            });

我担心以下代码：

            fields: [
                        {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                        {name: "field2", type: "date"},
                        {type: "button", title: "Done",
                         click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
                    ]

有人可以告诉我它是什么类型的代码吗？ MooTools 或 jQuery 中有类似的东西吗？ 我对这些事情一窍不通。请帮忙。先感谢您。

Answer 1

smartclient是它自己的RIA框架，您发布的代码是他们自己的语法。

您在下面看到的代码：

fields: [
    {
        name: "field1",
        type: "select",
        valueMap: ["foo", "bar"]
    },
    {
        name: "field2",
        type: "date"
    },
    {
        type: "button",
        title: "Done",
        click: "modalWindow.hide();touchButton.setTitle('Touch This')"
    }
]

是一个简单的文字数组定义，其中数组成员是字面定义的对象。这不是特定于 mootools 或 jquery 或任何框架，它只是 javascript。另外，请阅读 JSON（javascript 对象表示法），本质上是上述内容的传输形式。

至于类似 mootools UI 的版本：

• mochaui。 http://mochaui.org/demo/ - 我会稍等一下，他们可能会发布一个新的突破性版本，使其与 mootools 1.3 保持一致并修复了负载。
• LSD - 通过 mootools ART 的迷你 UI - https://github.com/Inviz/lsd#readme （即将推出的众多产品之一，或许也期待 Cloudera 带来一些东西）
• moolego ui - http://ui.moolego.org / - 似乎停滞不前 - github 上的最后一次提交是 11 个月前。
• 看看 mootools forge。
• 自己做吧！如今变得如此简单，尤其是使用 html5

Answer 2

如果您想创建模式对话框，您可以轻松使用 Jquery UI 对话框并添加您的表单
进行对话。

Jquery UI 对话框

Answer 3

要使用 mootools 创建对话框，您可以使用 MooDialog

Answer 4

首先，您需要熟悉 JavaScript 才能理解上面的 SmartClient 代码，我相信您已经熟悉了。

现在关于代码：
SmartClient 已构建其所有组件来支持 json/xml 数据格式。我们在这里不讨论 xml（可扩展标记语言）。

现在介绍 json（javascript 对象表示法）； Json 是非常简单且标准的格式，如果您了解 javascript，就可以学习。向/从客户端/服务器传递任何信息/参数；就像我们在 html ex 中所做的那样。 www.google.com？param=value； json 用冒号“:”字符分隔每个参数（键）和值。现在，如果您看到上面的代码，那么任何“{”和“}”之间的所有属性（参数）和值都代表一个 json。如果大括号“{}”嵌套，则存在嵌套的 json，如果 json 位于长括号“[]”之间，则表示 json 数组。

前任。如果有任何实体（例如用户）的表，那么它的 json 将为
[{user 1 json...}、{user 1 json...} 等等...]

但如果有任何一个 html 表单（在 SmartClient 中是 DynamicForm），那么一个json 就足够了 {用所有字段形成 json...}

让我们再次回顾一下代码：
第一行是
isc.IButton.create - SmartClient属于同构(isc)，因此任何isc组件都是使用isc.COMPONENT.create({})创建的；在“({...})”之间，您需要编写 json，其中 width: 120 只是一个 json。

代码中的任何类似 click、closeClick 的事件都只不过是像 html 中的 mouseover 一样的 javascript 匿名函数。

在 isc.Window.create 代码中，存在 json 和 json 元素数组的嵌套，并且 Window 是具有给定属性的 SmartClient 特定组件。

最后一个例子：
如果实体 User: 的属性 rollNo 为 1 且 name: "no-name" 那么它的 json 将为：
{“用户”：{“rollNo”：“1”，“名称”：“无名称”}}
或者
{"rollNo": "1", "name": "no-name"}

如果有两个这样的用户
[
{"rollNo": "1", "name": "no-name-1"},
{"rollNo": "2", "name": "no-name-2"}
]

你关于不透明度的问题的答案是；在窗口组件中使用以下属性：
modalMaskOpacity：50
此属性控制模态窗口后面显示的模态掩码的不透明度，值从 0（透明）到 100（不透明）变化，

谢谢
沙鲁