c# - Pure CSS popup WITHOUT Javascript on DropDownList Change -
i have users group policies block javascript; use of out of question.
i have found page performs function need: pure css popup box
however, popup triggered after anchor clicked.
my issue issue want popup trigger on event change in asp:dropdownlist. intent if item not listed in ddl, user able select first item "not listed". after selection need have popup open elements allow them add items database populates ddl.
i have attempted use following in ddl onselectedindexchanged event:
response.redirect(httpcontext.current.request.url.absoluteuri.tostring() + "#popup1"); this idea has failed. believe because have inside update panel. setup follows:
<asp:content id="content3" contentplaceholderid="contentplaceholder1" runat="server"> <!-- main wrapper --> <div class="wrapper wrapper-style2"> <div class="container"> <!-- breadcrumbs --> <br /> <div class="row 200%"> <div class="12u"> <!-- content --> <div id="maincontent" runat="server"> <asp:updatepanel id="upinputarea" runat="server" updatemode="conditional" associatedupdatepanelid="updateprogress"> <contenttemplate> <%-- equipment data --%> <section class="box post"> <h3 class="bold">equipment data</h3> <asp:updatepanel id="upequipmentdata" runat="server" updatemode="conditional" associatedupdatepanelid="updateprogress"> <contenttemplate> <div id="equipmentdatadiv2" runat="server" style="float: left; border-left: 2px solid rgba(144, 144, 144, 0.25); margin-right: auto; margin-left: auto;"> <asp:panel id="pnl1" runat="server" cssclass="inputset2"> <span>model:</span> <asp:dropdownlist id="ddlequipmentdatamodel" runat="server" appenddatabounditems="true" autopostback="false" cssclass="round-corners " datasourceid="sqlmodel" datatextfield="model" datavaluefield="id" /> </asp:panel> <asp:panel id="pnl2" runat="server" cssclass="inputset2"> <span>item:</span> <asp:dropdownlist id="ddlequipmentdataitem" runat="server" appenddatabounditems="true" autopostback="true" cssclass="round-corners width1" datasourceid="sqlitem" datatextfield="component" datavaluefield="id" onselectedindexchanged="ddl_selectedindexchanged" /> </asp:panel> <asp:panel id="pnl5" runat="server" cssclass="inputset2"> <span>s/n:</span> <asp:textbox id="txtequipmentdatasn" runat="server" cssclass="round-corners " /> </asp:panel> </div> </contenttemplate> </asp:updatepanel> </section> <%-- submit button --%> <section class="box post"> <div class="inputset"> <asp:updatepanel id="upsubmit" runat="server" updatemode="conditional" associatedupdatepanelid="updateprogress"> <contenttemplate> <asp:linkbutton id="lbsubmit" runat="server" class="button icon fa-info-sign" style="cursor: pointer;" onclick="btn_click" text="submit" /> </contenttemplate> </asp:updatepanel> </div> </section> <div id="popup1" runat="server" class="overlay"> <div class="css_popup"> <h2>add component database</h2> <a class="close" href="#">×</a> <div class="content"> <asp:panel id="panel13" runat="server" cssclass="inputset2"> <span>item:</span> <asp:textbox id="txtnewitem" runat="server" cssclass="round-corners " /> </asp:panel> <asp:panel id="panel14" runat="server" cssclass="inputset2"> <span>nsn:</span> <asp:textbox id="txtnewnsn" runat="server" cssclass="round-corners " /> </asp:panel> <asp:panel id="panel15" runat="server" cssclass="inputset2"> <asp:linkbutton id="lbadditem" runat="server" class="button icon fa-info-sign" style="cursor: pointer;" onclick="btn_click" text="add item" /> </asp:panel> </div> </div> </div> </contenttemplate> </asp:updatepanel> </div> </div> </div> </div> </div> <asp:updateprogress id="updateprogress" runat="server"> <progresstemplate> <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;"> <div class="fancybox-loading"> <asp:image id="imgupdateprogress" runat="server" imageurl="~/fancybox/fancybox_loading.gif" alternatetext="loading ..." tooltip="loading ..." style="margin-top: -22px; margin-left: -22px; position: fixed; top: 51%; left: 51%; background: url('/fancybox/fancybox_sprite2.png'); background-position: 2 -2px;" /> </div> </div> </progresstemplate> </asp:updateprogress> the css these elements mirror of link provided above.
Comments
Post a Comment