Positioning two Popup menu using CSS in ASP.Net

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Apr 28, 2017 01:54 AM
Forum: HTML and CSS
Answer: 2
Views: 4305

refer below thread

http://www.aspforums.net/Threads/130446/problem-in-using-popup-menu/?s=2#Replies

now I use 2 popup menu in page:

first

<div id="DI1R1">
    <asp:Image ID="Image1" runat="server" CssClass="imgT1" Visible="false"></asp:Image>
</div>
<asp:UpdatePanel ID="Updatepanel1" runat="server">
    <ContentTemplate>
        <div id="Div1">
            <asp:ImageButton ID="ImageButton3" runat="server" CausesValidation="false" CssClass="DPC9_Img2m"
                ImageUrl="~/Image/admin/imgdelete.png" Visible="false"></asp:ImageButton>
            <asp:Label ID="Label1" runat="server"></asp:Label>
            <asp:Panel ID="Panel2" runat="server">
                <asp:ModalPopupExtender DropShadow="true" ID="ModalPopupExtender6" PopupControlID="PnPopup6"
                    runat="server" TargetControlID="BtnPopup6" BackgroundCssClass="Modal" CancelControlID="Imgclose">
                </asp:ModalPopupExtender>
                <asp:Button ID="Button2" OnClick="BtnPopup6_Click" runat="server" Text="انتخاب ویدیو"
                    CssClass="DPC9_Img2" BorderStyle="Solid" BorderWidth="0px" BorderColor="White"
                    CausesValidation="false" />
                <asp:Panel ID="Panel3" runat="server" BackColor="White" CssClass="panel" Style="display: none">
                    <div class="CloseImge">
                        <asp:ImageButton ID="ImageButton4" runat="server" CssClass="closeI" ImageUrl="~/Image/admin/imgdelete.png"
                            CausesValidation="false" />
                    </div>
                    <div class="CloseImge1">
                        <asp:TextBox ID="TextBox2" runat="server" CssClass="txtdesA"></asp:TextBox>
                        <asp:ImageButton ID="ImageButton5" OnClick="BtnUploadL6_Click" runat="server" CausesValidation="false"
                            ImageUrl="~/Image/admin/createGalary.png" CssClass="load" />
                    </div>
                </asp:Panel>
            </asp:Panel>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

second

<div id="DI1R1">
    <asp:Image ID="Img5" runat="server" CssClass="imgT1" Visible="false"></asp:Image>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="Div1">
            <asp:ImageButton ID="Imgdelete5" runat="server" CausesValidation="false" CssClass="DPC9_Img2m"
                OnClick="btnDeleteImage5_Click" ImageUrl="~/Image/admin/recycle.png" Visible="false">
            </asp:ImageButton>
            <asp:Label ID="Lblimg5" runat="server"></asp:Label>
            <asp:Panel ID="Panel4" runat="server">
                <asp:ModalPopupExtender DropShadow="true" ID="ModalPopupExtender5" PopupControlID="PnPopup5"
                    runat="server" TargetControlID="BtnPopup5" BackgroundCssClass="Modal" CancelControlID="Imgclose5">
                </asp:ModalPopupExtender>
                <asp:Button ID="BtnPopup5" OnClick="BtnPopup5_Click" runat="server" Text="انتخاب تصویر"
                    CssClass="DPC9_Img2" BorderStyle="Solid" BorderWidth="0px" BorderColor="White"
                    CausesValidation="false" />
                <asp:Panel ID="PnPopup5" runat="server" BackColor="White" CssClass="panel" Style="display: none">
                    <div class="CloseImge">
                        <asp:ImageButton ID="Imgclose5" runat="server" CssClass="closeI" ImageUrl="~/Image/admin/imgdelete.png"
                            CausesValidation="false" />
                    </div>
                    <div class="CloseImge1">
                        <asp:FileUpload ID="fup5" runat="server" ToolTip="برای بار گذاری عکس کلیک نمایید."
                            CssClass="fup" />
                        <asp:ImageButton ID="ImageButton11" OnClick="BtnUploadL5_Click" runat="server" CausesValidation="false"
                            ImageUrl="~/Image/admin/createGalary.png" CssClass="load" />
                    </div>
                </asp:Panel>
            </asp:Panel>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

the first popup menu worked correctly but when I used same code for second popup it doesn't worked I mean when I click on BtnPopup5 (imagebutton) popup will appear but when I click on ImageButton11 to run behind code it doesn't do any thing I mean it doesn't run behind code and doesn't disappear popup and popup will stay on page...

it just worked when I remove this code:

<asp:UpdatePanel runat="server">
        <ContentTemplate>

when I remove above code from second popup it will worked but disappear popup lately

what should I do know...

how I can use 2 popup in page that both worked like first popup...

best regards

neda

Download FREE API for Word, Excel and PDF in ASP.Net

Indresh

0 1

Reply
ANSWER
User: Indresh
Replied: on Apr 28, 2017 05:04 AM
Modified: on Apr 28, 2017 05:40 AM
Report

Hi nedash,

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

<form id="form1" runat="server">
<div>
    <asp:ScriptManager runat="server" />
    <asp:Image ID="Img6" Visible="false" CssClass="load" ImageUrl="~/Image/admin/createGallery.jpg"
        runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div id="DI1R2">
                <asp:ImageButton ID="Imgdelete6" runat="server" CausesValidation="false" CssClass="DPC9_Img2m"
                    ImageUrl="~/Image/admin/imgdelete.jpg" Visible="false"></asp:ImageButton>
                <asp:Label ID="Lblimg6" runat="server" Visible="false"></asp:Label>
                <asp:Panel ID="Panel5" runat="server">
                    <asp:ModalPopupExtender DropShadow="true" ID="ModalPopupExtender1" PopupControlID="PnPopup6"
                        runat="server" TargetControlID="BtnPopup6" BackgroundCssClass="Modal" CancelControlID="Imgclose">
                    </asp:ModalPopupExtender>
                    <asp:ModalPopupExtender DropShadow="true" ID="ModalPopupExtender2" PopupControlID="Panel1"
                        runat="server" TargetControlID="Button1" BackgroundCssClass="Modal" CancelControlID="Imgclose">
                    </asp:ModalPopupExtender>
                    <asp:Button ID="BtnPopup6" runat="server" Text="انتخاب ویدیو" CssClass="DPC9_Img2"
                        BorderStyle="Solid" BorderWidth="0px" BorderColor="White" CausesValidation="false" />
                    <asp:Button ID="Button1" runat="server" Text="انتخاب ویدیو2" CssClass="DPC9_Img2"
                        BorderStyle="Solid" BorderWidth="0px" BorderColor="White" CausesValidation="false" />
                    <asp:Panel ID="PnPopup6" runat="server" BackColor="White" CssClass="panel" Style="display: none">
                        <div class="CloseImge">
                            <asp:ImageButton ID="Imgclose" runat="server" CssClass="closeI" ImageUrl="~/Image/admin/imgdelete.jpg"
                                CausesValidation="false" />
                            <span>Popup No:1</span>
                        </div>
                        <div class="CloseImge1">
                            <asp:TextBox ID="Txtdes" runat="server" CssClass="txtdesA"></asp:TextBox>
                            <asp:ImageButton ID="ImageButton15" runat="server" CausesValidation="false" ImageUrl="~/Image/admin/createGallery.jpg"
                                CssClass="load" />
                        </div>
                    </asp:Panel>
                    <asp:Panel ID="Panel1" runat="server" BackColor="White" CssClass="panel" Style="display: none">
                        <div class="CloseImge">
                            <asp:ImageButton ID="ImageButton1" runat="server" CssClass="closeI" ImageUrl="~/Image/admin/imgdelete.jpg"
                                CausesValidation="false" />
                            <span>Popup No:2</span>
                        </div>
                        <div class="CloseImge1">
                            <asp:TextBox ID="TextBox1" runat="server" CssClass="txtdesA"></asp:TextBox>
                            <asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="false" ImageUrl="~/Image/admin/createGallery.jpg"
                                CssClass="load" />
                        </div>
                    </asp:Panel>
                </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div>
    <style type="text/css">
        .DPC9_Img2
        {
            margin: 5px 22px 0 0;
            background-color: White;
            cursor: pointer;
            float: right;
            height: 25px;
            font-size: 14.5px;
        }
            
        .CloseImge
        {
            float: right;
            width: 300px;
        }
        .closeI
        {
            float: right;
            width: 22px;
            height: 22px;
            margin: 5px 10px 0 0;
        }
        #CloseImge1
        {
            float: right;
            width: 500px;
        }
            
        .Modal
        {
            background-color: #2a2a23;
            opacity: 0.5;
        }
        .panel
        {
            background: url(../image/admin/popup1.png) no-repeat;
            float: right;
            width: 531px;
            height: 118px;
        }
        .load
        {
            width: 100px;
            height: 70px;
        }
        .txtdesA
        {
            border: 1px solid #575757;
            float: right;
            margin: 18px 65px 0 0;
            background-color: White;
            direction: rtl;
            width: 240px;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=ImageButton15]').click(function () { //ImageButton15 is Id of ImageButton.
                $('[id*=ModalPopupExtender1]').hide();
            });
        });
    </script>
</div>
</form>

protected void BtnPopup6_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Show();
}

protected void BtnUploadL6_Click(object sender, EventArgs e)
{
    Thread.Sleep(2000);
    Lblimg6.Text = Txtdes.Text;
    Lblimg6.Visible = true;
    Img6.Visible = true;
    Imgdelete6.Visible = !(BtnPopup6.Visible = false);
    Img6.Visible = true;
    Button1.Visible = false;
}

protected void BtnUploadL7_Click(object sender, EventArgs e)
{
    Thread.Sleep(2000);
    Lblimg6.Text = TextBox1.Text;
    Lblimg6.Visible = true;
    Img6.Visible = true;
    Imgdelete6.Visible = !(BtnPopup6.Visible = false);
    Img6.Visible = true;
}

Vb.net

Protected Sub BtnPopup6_Click(sender As Object, e As EventArgs)
	ModalPopupExtender1.Show()
End Sub

Protected Sub BtnUploadL6_Click(sender As Object, e As EventArgs)
	Thread.Sleep(2000)
	Lblimg6.Text = Txtdes.Text
	Lblimg6.Visible = True
	Img6.Visible = True
	Imgdelete6.Visible = Not (InlineAssignHelper(BtnPopup6.Visible, False))
	Img6.Visible = True
	Button1.Visible = False
End Sub

Protected Sub BtnUploadL7_Click(sender As Object, e As EventArgs)
	Thread.Sleep(2000)
	Lblimg6.Text = TextBox1.Text
	Lblimg6.Visible = True
	Img6.Visible = True
	Imgdelete6.Visible = Not (InlineAssignHelper(BtnPopup6.Visible, False))
	Img6.Visible = True
End Sub

Screenshot

Indresh

0 5

Reply
ANSWER
User: Indresh
Replied: on May 01, 2017 08:07 AM
Modified: on May 01, 2017 08:09 AM
Report

Hi nedash,

Please refer the below code and modify as per your requirement. You need to set "Panel" top and bottom position using css in your code.

<div>
    <asp:ScriptManager runat="server" />
    <div id="DI1R1">
        <asp:Image ID="Image1" runat="server" CssClass="imgT1" Visible="false"></asp:Image>
    </div>
    <asp:UpdatePanel ID="Updatepanel11" runat="server">
        <ContentTemplate>
            <div id="Div1">
                <asp:ImageButton ID="Imgdelete6" runat="server" CausesValidation="false" CssClass="DPC9_Img2m"
                    ImageUrl="~/Image/admin/imgdelete.jpg" Visible="false"></asp:ImageButton>
                <asp:Label ID="Lblimg6" runat="server" Visible="false"></asp:Label>
                <asp:Panel ID="Panel5" runat="server">
                    <asp:ModalPopupExtender DropShadow="true" ID="ModalPopupExtender1" PopupControlID="PnPopup6"
                        runat="server" TargetControlID="BtnPopup6" BackgroundCssClass="Modal" CancelControlID="Imgclose">
                    </asp:ModalPopupExtender>
                    <asp:Button ID="BtnPopup6" OnClick="BtnPopup6_Click" runat="server" Text="انتخاب ویدیو"
                        CssClass="DPC9_Img2" BorderStyle="Solid" BorderWidth="0px" BorderColor="White"
                        CausesValidation="false" />
                    <asp:Panel ID="PnPopup6" runat="server" BackColor="White" CssClass="panel" Style="display: none;
                        top: -240px !important">
                        <div class="CloseImge">
                            <asp:ImageButton ID="Imgclose" runat="server" CssClass="closeI" ImageUrl="~/Image/admin/imgdelete.jpg"
                                CausesValidation="false" />
                        </div>
                        <div class="CloseImge1">
                            <asp:TextBox ID="Txtdes" runat="server" CssClass="txtdesA"></asp:TextBox>
                            <asp:ImageButton ID="ImageButton15" OnClick="BtnUploadL6_Click" runat="server" CausesValidation="false"
                                ImageUrl="~/Image/admin/createGallery.jpg" CssClass="load" />
                        </div>
                    </asp:Panel>
                </asp:Panel>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    Second:
    <div id="DI1R1">
        <asp:Image ID="Img5" runat="server" CssClass="imgT1" Visible="false"></asp:Image>
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="Div1">
                <asp:ImageButton ID="Imgdelete5" runat="server" CausesValidation="false" CssClass="DPC9_Img2m"
                    OnClick="btnDeleteImage5_Click" ImageUrl="~/Image/admin/recycle.png" Visible="false">
                </asp:ImageButton>
                <asp:Label ID="Lblimg5" runat="server"></asp:Label>
                <asp:Panel ID="Panel4" runat="server">
                    <asp:ModalPopupExtender DropShadow="true" ID="ModalPopupExtender5" PopupControlID="PnPopup5"
                        runat="server" TargetControlID="BtnPopup5" BackgroundCssClass="Modal" CancelControlID="Imgclose5">
                    </asp:ModalPopupExtender>
                    <asp:Button ID="BtnPopup5" OnClick="BtnPopup5_Click" runat="server" Text="انتخاب تصویر"
                        CssClass="DPC9_Img2" BorderStyle="Solid" BorderWidth="0px" BorderColor="White"
                        CausesValidation="false" />
                    <asp:Panel ID="PnPopup5" runat="server" BackColor="White" CssClass="panel" Style="display: none;
                        top: 150px">
                        <div class="CloseImge">
                            <asp:ImageButton ID="Imgclose5" runat="server" CssClass="closeI" ImageUrl="~/Image/admin/imgdelete.jpg"
                                CausesValidation="false" />
                        </div>
                        <div class="CloseImge1">
                            <asp:FileUpload ID="fup5" runat="server" ToolTip="برای بار گذاری عکس کلیک نمایید."
                                CssClass="fup" />
                            <asp:ImageButton ID="ImageButton11" OnClick="BtnUploadL5_Click" runat="server" CausesValidation="false"
                                ImageUrl="~/Image/admin/createGalary.jpg" CssClass="load" />
                        </div>
                    </asp:Panel>
                </asp:Panel>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Positioning two Popup menu using CSS in ASP.Net

Company

Explore

Follow us

Contact Us