how to put Button and ImageButton in Popup using jQuery in ASP.Net

Last Reply on Jun 05, 2017 04:44 AM By nedash

Posted on May 30, 2017 08:28 AM

hi refer belwo link

https://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPNet.aspx

 

I want use popup that when users click on upload button it will show popup and in this popup I want put one imagebutton(imgload) and one fileupload control in above link it put just two button(yes No) in popup

how I can put popup with oneimagebutton and fileupload control?

Best regards

neda

 

 

Posted on Jun 01, 2017 06:37 AM Modified on on Jun 01, 2017 06:39 AM

Hi nedash,

Please refer the below code and modify as per your requirement.

<form id="form1" runat="server">
<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 () {
        $("[id*=btnUpload]").removeAttr("onclick");
        $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            title: "User Picture",
            width: 350,
            height: 260,
            buttons: [
    {
        id: "Yes",
        text: "Yes",
        click: function () {
            $("[id*=btnUpload]").attr("rel", "Upload");
            $("[id*=btnUpload]").click();
        }
    },
    {
        id: "No",
        text: "No",
        click: function () {
            $(this).dialog('close');
        }
    }
    ]
        });
        $("[id*=btnUpload]").click(function () {
            if ($(this).attr("rel") != "Upload") {
                $('#dialog').dialog('open');
                return false;
            } else {
                __doPostBack(this.name, '');
            }
        });
    });
</script>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="UploadRecord" UseSubmitBehavior="false" />
<div id="dialog" style="display: none" align="center">
    <asp:ImageButton ID="imgbutton" ImageUrl="http://www.aspforums.net/Avatars/UserImage.png"
        runat="server" />
    <br />
    <asp:FileUpload ID="UserPic" runat="server" />
</div>
</form>

C#

protected void UploadRecord(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Picture Uploaded.')", true);
}

Vb.net

Protected Sub UploadRecord(sender As Object, e As EventArgs)
	ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "alert('Picture Uploaded.')", True)
End Sub

 

 


Posted on Jun 05, 2017 04:44 AM

hi indresh

refer below site I use this modal popup it worked fine  thanks for your replay

https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

best regards

neda