Hi Madhu,
I might recommend instead of attempting to open the full, non-modal, view of a media gallery inside of a modal that you instead create your own modal callbak that can be displayed inside of a modal. This would be simper to build and likely provide a better user experience as the modal could show just what is necessary (upload box, save, maybe a list of galleries).
Here is an example of creating your own modal within a widget. It doesn't demonstrate how to render an upload control and accept uploads. For that, I would refer you to the existing Media Gallery Post widget's implementation.
For creating your own callback, this is documented here:
http://telligent.com/community/developers/w/developer7/31432.using-custom-ajax-endpoints.aspx
And here's an example of using it for a modal:
$core_v2_widget.GetExecutedFileUrl() is a velocity extension method designed to support scenarios where widgets wish to define their own server-side-executed callbacks for use (mainly) as custom AJAX callbacks by the widget, or in this case, as the target to display within a modal. It accepts the name of an attached velocity script file and returns a URL which, when requested against, executes the target script in velocity.
To use it, add a velocity script file to your widget, in this case, 'modalcallback.vm' by clicking 'Add New File' when editing a widget. Here's a sample for a modal callback which shows the current time and accepts text input from the user:
<!DOCTYPE html>
<html>
<head>
<title>Test Modal</title>
<script type="text/javascript">
var closeModal = function(){
var retval = document.getElementById('retval').value;
window.parent.jQuery.glowModal.close(retval, window.parent);
};
</script>
</head>
<body>
<p>Hello from an executed modal callback.</p>
<p>The current time is $core_v2_language.FormatDateAndTime($core_v2_utility.CurrentDate)</p>
<p>The accessing user is $core_v2_user.Accessing.DisplayName</p>
<p>
<label for="retval">Type a return value</label><br />
<input id="retval" type="text" />
</p>
<button onclick="closeModal(); return false;" type="button">Close and Send Return Value</button>
</body>
</html>
Note that the sample contains velocity script which will be executed when the ExecutedFileUrl is requested. Also note that this sample defines an entire HTML document, since modals expect to load entire documents via an iframe. The callback could just as easily contain only an HTML fragment or even literal JSON content if intended to be called via ajax. Many factory default widgets return literal JSON from callbacks after performing some API action. (The 'Activity Message List' widget is an example that returns pre-processed HTML fragments via AJAX requests made by the widget.)
Then, within the content of the main script, add the following sample:
<p><a href="#" id="$core_v2_widget.UniqueId('modalOpenerId')">Display Modal</a></p>
<p><span id="$core_v2_widget.UniqueId('responseHolderId')"></span></p>
#registerEndOfPageHtml()
<script type="text/javascript">
var callbackUrl = "$core_v2_encoding.JavascriptEncode($core_v2_widget.GetExecutedFileUrl('modalcallback.vm'))";
var modalOpenerId = "$core_v2_encoding.JavascriptEncode($core_v2_widget.UniqueId('modalOpenerId'))";
var responseHolderId = "$core_v2_encoding.JavascriptEncode($core_v2_widget.UniqueId('responseHolderId'))";
jQuery(function(j){
j('#' + modalOpenerId).click(function(e){
e.preventDefault();
j.glowModal(callbackUrl, {
width:300,
height: 200,
onClose: function(response) {
j('#' + responseHolderId).html("Received response: " + response);
}
});
});
});
</script>
#end
Note the callbackUrl. This sample renders a link which opens a modal with its target set to the Executed File URL of 'modalcallback.vm'. It also demonstrates accepting a return value from the modal and displaying it within the main widget body.
Hope this helps.