Hi Avisai,
I have created sample that full-fill your requirement.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: true,
title: "jQuery Dialog",
width: 500,
height: 300,
buttons: {
Ok: function () {
//Function For Ok;
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
};
</script>
</head>
<body>
<form runat="server" action="" method="post" enctype="multipart/form-data" name="form" id="form1">
<label>
<asp:Button ID="btnShow" Text="Upload" runat="server" OnClick="btnShowPopup_Click" />
</label>
<div id="dialog" style="display: none" align="center">
<table>
<tr>
<td>
Chose File:
</td>
<td>
<input type="file" multiple="true" />
</td>
</tr>
<tr>
<td>
Destination folder:
</td>
<td>
<input type="file" multiple="true" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code
protected void btnShowPopup_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup();", true);
}
Screenshot
