JS implementation to delete records when the prompt effect

Source: Internet
Author: User

  Delete records when the prompt effect, quite human, the implementation of a lot of ways, in this article for you to introduce the use of JS is how to achieve the

The style     code is as follows: <style type= "Text/css" >  body{font-size:13px} . divshow{line-height:32px; Height:32px;background-color: #eee;width:280px;padding-left:10px} . divshow span{padding-left:50px} . Dialog{width:360px;border:solid 5px #666;p osition:absolute;display:none;z-index:101} . Dialog title{ Background-color: #fbaf15;p adding:10px;color: #fff;font-weight:bold} . dialog. Title img{float:right} . dialog. Content{background-color: #fff;p adding:25px;height:60px} . dialog. Content img{float:left} . dialog. Content span{float:left;padding-top:10px;padding-left:10px} . dialog. bottom{text-align:right;padding : 10px 10px 10px 0px;background-color: #eee}  Mask {width:100%;height:100% background-color: #000;p osition: absolute;  Top:0px;left:0px;filter:alpha (opacity=30);d isplay:none;z-index:100} . btn {border: #666 1px solid;padding:2px;width:65px;  filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, StartcolorstR= #ffffff, endcolorstr= #ECE9D8);}     </style>    jquery    code as follows: <script type= "Text/javascript" >  $ ( function () {  $ ("#Button1"). Click (function () {//Register Delete button click event   $ (". Mask"). Show ();//display background color   showdialog (); Sets the top and left  $ (". Dialog") of the prompt dialog box. Show (); Display prompt dialog box  })  /*  * Set the top and left  */  function ShowDialog () {  var objw of the prompt dialog box based on the current page and scroll bar position $ (window); Current Window   var OBJC = $ (". Dialog"); dialog box   var brsw = objw.width ();  var brsh = objw.height ();  var scll = objw.scrollleft ();  var sclt = Objw.scrolltop ();  var curw = objc.width ();  var curh = objc.height (); //Calculate the left margin of the center of the dialog box   var ieft = SCL L + (BRSW-CURW)/2; //The top margin for the center of the calculation dialog box   the var upper = sclt + (BRSH-CURH)/2; //Settings dialog box in the page position   OBJC.CSS ( {' Left ': Left, ' top ': top} ';  }      $ (window). Resize (function () {//Page window size Change event   if (!$ (". Dialog"). Is (": visible")) {  Return; }  ShowDialog (); Set top and left });      $ (". Title img") in the Prompt dialog box. Click (function () {//register to close Picture Click event   $ (". Dialog"). Hide ();  $ (". Mask"). Hide (); })       $ ("#Button3"). Click (function () {//Register Cancel button click event   $ (". Dialog "). Hide ();  $ (". Mask "). Hide (); })       $ (" #Button2 "). Click (function () {//Register OK button click event   $ (". Dialog"). Hide ();  $ (". Mask"). Hide ();  if ($ ("input:checked"). Length!= 0) {//If delete Row   $ (". Divshow "). Remove (); Delete a row of data  } })  })   </script>    html    code as follows: <div class= "Divshow" >  <input id= "Checkbox1" type= checkbox/>  <a href= "#" > This is a record that can be deleted </a>  <span >  <input id= "Button1" type= "button" value= "delete" class= "btn"/>  </span>  </div>   <div class= "Mask" ></div>  <div class= "dialog" >  <div class= "title" >  <img src= "images/cLose.gif "alt=" click to close "/> Delete prompt   </div>  <div class=" content ">  <img src=" images/ Delete.jpg "alt=" "/><span> you really want to delete this record? </span>  </div>  <div class= "Bottom" >  <input id= "Button2" button "type=" OK "class=" btn "/>    <input id=" Button3 "type=" button "value=" Cancel "class=" BTN "/>  </div>& nbsp </div> 
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.