Popup-Eingabeaufforderungseffekt, wenn jquery Datensätze

Heim

Web-Frontend

js-Tutorial

Popup-Eingabeaufforderungseffekt, wenn jquery Datensätze_jquery löscht

May 16, 2016 pm 04:49 PM

jquery Daten löschen 提示

Der Aufforderungseffekt ist wie in der Abbildung dargestellt: (Das Löschaufforderungsfeld wird immer in der Mitte angezeigt)
Popup-Eingabeaufforderungseffekt, wenn jquery Datensätze_jquery löscht

Kopieren Sie den Code Der Code lautet wie folgt:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Prompteffekt beim Löschen von Datensätzen 
<style type="text/css"> :32px; height:32px; width:#eee; padding-left:10px;} 
.divShow span{ padding-left:50px;} 
.dialog{ width:360px; :solid 5px #666; position:none; ;} 
.dialog .title img{ float:right;} 
.dialog .content{ background-color:#fff; padding:25px; height:60px;} 
.dialog .content img{ float :left;} 
.dialog .content span{ float:left; padding-left:10px;} 
.dialog .bottom{ text-align:right; padding:10px 10px 0px ; Hintergrundfarbe:#eee;} 
.mask{ width:100%; height:100%; top:0px; 
filter (opacity=30); z-index:none;} 
.btn{ border:solid 1px #666; width:65px; filter:progid.DXImageTransform(GradientType= 0,StartColorStr=#ffffff, 
EndColorStr =#ECE9D8);} 
</style><script src="Scripts/jquery-1.4.1-vsdoc.js" type="text /javascript"></script> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script-Typ ="text/javascript"> 
 $(function () { 
$("#Button1").click(function () { //Klickereignis zum Löschen der Schaltfläche registrieren
$(".mask" ).show(); //Hintergrundfarbe anzeigen 
showDialog(); //Oben und links im Eingabeaufforderungsdialogfeld festlegen 
$(".dialog").show(); Dialogbox 
}); 
/*Legen Sie entsprechend der aktuellen Seite und der Position der Bildlaufleiste den oberen und linken Rand des Eingabeaufforderungsdialogfelds fest*/ 
Funktion showDialog() { 
var objW = $ (Fenster); //Aktuelles Fenster 
var objC = $(". dialog"); //Dialog 
var brsW = objW.width(); 
var brsH = objW.height(); 🎜>var sclL = objW.scrollLeft(); 
var cruW = objC.width(); 
var cruH = objC.height(); var left = sclL (brsW - cruW) / 2; //Berechnung des linken Randes des Dialogfelds, wenn es zentriert ist
var top = sclT (brsH - cruH) / 2; //Berechnung des oberen Randes, wenn das Dialogfeld zentriert ist
 objC.css({ "left": left, "top": top }) ; //Legen Sie die Position des Dialogfelds auf der Seite fest
} 
$(window).resize(function () { / /Ereignis zur Änderung der Seitenfenstergröße
if (!$(".dialog"). is(":visible")) { 
return; und links vom Eingabeaufforderungsdialogfeld 
}); 
$(".title img ").click(function () { //Registrieren, um das Bildklickereignis zu schließen 
$(".dialog") .hide(); 
$(".mask").hide(); 
$("#Button3").click(function () { //Registrieren Sie den Klick auf die Schaltfläche „Abbrechen“. event 
$(".dialog").hide(); 
$(".mask" ).hide(); 
$("#Button2").click( function () { //OK-Button-Klick-Ereignis registrieren
$(".dialog").hide() ; 
$(".mask").hide(); 
if ($("input :checked").length != 0) { //Wenn gelöschte Zeile ausgewählt ist 
$(". divShow").remove(); //Eine Datenzeile löschen 
} 
}); 
}); 
</script> 
&lt ;body> "checkbox" id="Checkbox" /> 
<a href="#">Dies ist ein Datensatz, der gelöscht werden kann ="button" id="Button1" class="btn" value="Delete"/>&lt ;input type="button" value="Compare" /> 🎜></div> 
<div class="mask"></div><div class="dialog"> ; 
<img src="Images/close.gif" alt="Zum Schließen klicken" /> Eingabeaufforderung beim Löschen von 
</div> 
<img src="Images/delete.jpg" alt="" /> 
&lt ;span>Möchten Sie diesen Datensatz wirklich löschen? </span> 
</div> <div class="bottom"><input type="button" id="Button2" value="OK" class=" btn" /> 
<input type="button" id="Button3" value="Cancel" class="btn" /> 
</div> 
</div> 
</body> 
</html>

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn