Question

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

Image http://img714.imageshack.us/img714/1592/gggggol.jpg

我想使用类似的实现：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中有类似的东西吗？我对这些事情不满意。请帮忙。提前谢谢。

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的迷你用户界面 - https://github.com/Inviz/lsd#readme（未来很多人中的一个，也许是来自Cloudera的东西，也许）
moolego ui - http://ui.moolego.org/ - 似乎停滞不前 - github上的最后一次提交是从11个月前开始的。
看看mootools forge。
制作你自己的！这些日子过得如此简单，特别是使用html5

Answer 2

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

Jquery UI Dialog

Answer 3

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

Answer 4

首先，你需要熟悉javascript来理解上面的SmartClient代码，我相信你已经这样了。

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

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

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

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

让我们再次重新审视代码：第一行是 isc.IButton.create - SmartClient属于isomorphic（isc），因此任何isc组件都是使用isc.COMPONENT.create（{}）创建的;在“（{...}）”之间你需要写json，其中宽度：120 只是一个json。

像click，closeClick这样的任何事件都只是一个javascript匿名函数，比如html中的mouseover。

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

最后一个例子：如果有实体User：将属性rollNo设为1并且命名：“no-name”则其json将为： {“user”：{“rollNo”：“1”，“name”：“no-name”}} 要么 {“rollNo”：“1”，“name”：“no-name”}

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

回答你关于不透明度的问题;在窗口组件中使用以下属性： modalMaskOpacity：50 此属性控制模态窗口后面显示的模态蒙板的不透明度，值从0（透明）到100（不透明）

由于 shaILU

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

4 个答案: