How to get pop window with opacity in background like this?

Question

I want to have modal window pop up (it is a window with opacity in background) on my website to display some data. Please check image below :

I would like to use similar implementation as: http://www.smartclient.com/?skin=Enterprise#modality But i couldn't figure out how to do that. Can anyone help me implement this? I couldn't find which file to download from here: http://www.smartclient.com/product/download.jsp
Isn't that something like MooTools or jQuery framework? I can't understand which file to include from their downloaded library. Can some one please provide me an example html page code to do that?

Another thing is, i saw following code in their source :

            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')" }
                                ]
                    })
                 ]
            });

I am concerned about following code :

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

Can some one please tell me what kind of code it is? Is there something like that available in MooTools or jQuery? I am n00b to these things. Please help. Thank you in advance.

Answer 1

smartclient is its own RIA framework, the code you posted is their own syntax.

the code you see below:

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

is a simple literal array definition where the array members are literally defined objects. This is not specific to mootools or jquery or any framework, it's just javascript. also, read up on JSON (javascript object notation), essentially a transport form of the above.

as for mootools UI-like releases:

• mochaui. http://mochaui.org/demo/ - i'd wait for a bit, they are likely to release a new ground-breaking version that brings it in-line with mootools 1.3 and fixes loads.
• LSD - mini UI via mootools ART - https://github.com/Inviz/lsd#readme (one of many to come, expect something from Cloudera as well, perhaps)
• moolego ui - http://ui.moolego.org/ - seems stalled though - last commit on github is from 11 months ago.
• have a look on the mootools forge.
• make your own! ever so easy these days, especially with html5

Answer 2

If you want to create modal dialog, you can easily use Jquery UI Dialog and add your form to dialog.

Jquery UI Dialog

Answer 3

To create dialogs with mootools you can use MooDialog

Answer 4

First you need to be comfortable with javascript to understand above SmartClient code, which I believe you already are.

Now about code: SmartClient has build all of its component to support json/xml data formats. We are not discussing xml (eXtensible Markup Language) over here.

Now about json (javascript object notation); Json is very simple and standard format to learn if you know javascript. To pass any information/parameters to/from client/server; like we do in html ex. www.google.com?param=value; json separates every param(key) and value by colon ":" character. Now if you see above code then all attributes (params) and values between any "{" and "}" represent one json. If curly braces "{}" are nested then there are nested jsons and if jsons are between long braces "[]", then it represent array of json.

Ex. If there is table of any entity say users, then its json would be [{user 1 json...}, {user 1 json...} and so on...]

but if there is any one html form (in SmartClient it is DynamicForm) then a single json is enough {form json with all fields...}

Let's revisit code once again: the very first line is isc.IButton.create - SmartClient belongs to isomorphic (isc), so any isc component is created using isc.COMPONENT.create ({}); between "({...})" you need to write json where width: 120 is nothing but a json.

Any event like click, closeClick in the code are nothing but a javascript anonymous function like mouseover in html.

In isc.Window.create code there is nesting of json and array of json elements and Window is SmartClient specific component with given attributes.

Last example: if there is entity User: has attributes rollNo as 1 and name: "no-name" then its json would be: {"user": {"rollNo": "1", "name": "no-name"}} or {"rollNo": "1", "name": "no-name"}

and if there are two such users then [ {"rollNo": "1", "name": "no-name-1"}, {"rollNo": "2", "name": "no-name-2"} ]

And answer to your question about opacity is; use below property in window component: modalMaskOpacity: 50 This property controls the opacity of the modal mask displayed behind modal windows and the value varies from 0 (transparent) to 100 (opaque)

Thanks shaILU