如何在这样的背景中获得不透明的弹出窗口？答案

【问题标题】：How to get pop window with opacity in background like this?如何在这样的背景中获得不透明的弹出窗口？
【发布时间】：2011-01-28 01:25:42
【问题描述】：

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

我想使用类似的实现：http://www.smartclient.com/?skin=Enterprise#modality 但我不知道该怎么做。谁能帮我实现这个？我找不到从这里下载的文件：http://www.smartclient.com/product/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 中是否有类似的功能？我对这些事情不以为然。请帮忙。提前谢谢你。

【问题讨论】：

标签： jquery mootools smartclient

【解决方案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 的版本：

莫柴。 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

【讨论】：

【解决方案2】：

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

Jquery UI Dialog

【讨论】：

我知道如何在 jQuery 或 MooTools 中创建模态窗口。但我很好奇 SmartClient 中的情况如何：smartclient.com/product/download.jsp，因为它还有许多其他功能，我也愿意为我的页面实现这些功能。不过还是谢谢你的回复。
是的，它有很多功能，但我认为你可以使用 Jquery 来实现简单或高级模式，但你必须将它添加到你的代码中。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

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

但如果有任何一个 html 表单（在 SmartClient 中是 DynamicForm），那么单个 json 就足够了 {form json with all fields...}

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

代码中的click、closeClick之类的任何事件都只是一个javascript匿名函数，例如html中的mouseover。

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

最后一个例子：如果有实体 User: 具有属性 rollNo 为 1 和 name: "no-name" 那么它的 json 将是： {"user": {"rollNo": "1", "name": "no-name"}} 或者 {"rollNo": "1", "name": "no-name"}

如果有两个这样的用户，那么 [ {"rollNo": "1", "name": "no-name-1"}, {“rollNo”：“2”，“名称”：“no-name-2”} ]

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

谢谢夏路

【讨论】：