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%;">&nbsp;</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

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more