asp.net - Opening CSS modal dialog using javascript -
i have following modal dialog (popup) using css3 in asp page user registration:
html :
<%-- modal popup starts here--%> <div id="openmodal" class="modaldialog"> <div> <a href="#close" title="close" class="close" onclick="disableallpopuptxt()">x</a> <table style="width:100%;"> <tr> <td style="text-align: center; width: 100%;"></td> </tr> <tr> <td style="text-align: center; width: 100%;"> <asp:label id="lblerrormsg2" runat="server" font-bold="true" forecolor="#ff3300" text="email id taken " visible="false"></asp:label> </td> </tr> <tr> <td style="text-align: center; width: 100%;"> <input id="txtcustfname" name="txtcustfname" type="text" required placeholder="enter first name" style="width: 80%" /> </td> </td> </tr> <tr> <td style="text-align: center; width: 100%;"> <input id="txtcustlname" name="txtcustlname" type="text" required placeholder="enter last name" style="width: 80%" /> </td> </td> </tr> <tr> <td style="text-align: center; width: 100%;"> <input id="txtcustremail" name="txtcustremail" type="email" required placeholder="enter valid email id" style="width: 80%" /> </td> </td> </tr> <tr> <td style="text-align: center; width: 100%;"> <input id="txtcustrpwd" name="txtcustrpwd" type="password" required placeholder="enter password" style="width: 80%" /> </td> </td> </tr> <tr> <td style="text-align: center; width: 100%;"> <input id="txtcustrepwd" name="txtcustrepwd" type="password" required placeholder="retype password" style="width: 80%" /> </td> </td> </tr> <tr> <td style="text-align: center; width: 100%;"> <input id="txtcustph" name="txtcustph" type="number" size="10" min="10" max="10" required placeholder="enter valid mobile no" style="width: 80%" /> </td> </td> </tr> <tr> <td class="style1" style="text-align: center; width: 100%;" onclick="btnsignup()"> <asp:button id="btnsingup" runat="server" onclick="signup" text="login" /> </td> </tr> <tr> <td style="text-align: center; width: 100%;"> </td> </tr> </table> </div> </div> <%--modal popup ends here--%> css :
.modaldialog { position: fixed; font-family: arial, helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modaldialog:target { opacity: 1; pointer-events: auto; } .modaldialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #ffffff; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } in asp page i've following anchor tag used display popup:
<a href="#openmodal" id="dialoglink" style="color: #ffffff; font-weight: bold">register</a> now problem is:
as registration form, want server side validation of existing email id . if user entered email id exist in db want reopen above modal dialog error message email id exist.
i m not able reopen dialog box. there way using js?
my advice, use css class open , close. add css class,
.opend { opacity :1; } add event onclick link,
<a onclick='document.getelementbyid("openmodal").class="modaldialog opend"; return false;'>>register</a> when rendering control server, depending on open mode, either render or without css class.
hope helps.
Comments
Post a Comment