This example is very easy.
All you need are few lines to get a very nice floating frame in your web.
Have you download Ext Js?
Let´s do it:
Click here to get it
After that let´s write code.
Firstly you have to add references to de JS files. You need only 2 references because this is very basic example
<head>
...
<script type="text/javascript" language="javascript" src="../../includes/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript" src="../../includes/ext-3.3.1/ext-all.js"></script>
...
</head>
Now you must to add a reference to CSS file
<head>
...
<link rel="Stylesheet" href="../../includes/ext-3.3.1/resources/css/ext-all.css"/>
...
</head>
Note: you can add ext-all.css or one of other which
represents diferents themes (blue, gray, black...)
Now in your code add this lines:
<body>
...
<div id="hello-win" class="x-hidden"></div>
...
</body>
And finishing the script code.
<script language="javascript" type="text/javascript">
function ventanaCargaFicheros(p) {
var win;
if (!win) {
win = new Ext.Window({
title: 'Subida de ficheros',
applyTo: 'hello-win',
layout: 'fit',
width: 500,
height: 350,
closeAction: 'close',
buttons: [{ text: 'Cerrar', handler: function() { win.close(); } }],
keys: [{ key: 27, /* hide on Esc*/fn: function() { win.close(); } }],
html: '<iframe src=SubidaFichero/index.aspx?P=' + p + ' style="width:485px;height:283px;"></iframe>'
});
}
win.show(this);
}
</script>
Done all before you have an windows iframe, now you must to decide how to lunch it, for example whith a button, with a link there are many diferents ways to do that.
<a href="#" onclick="ventanaCargaFicheros(params);">window</a>
