Home > Developer > Web Develop
JQuery -- dialog Box plug-in -- dialog, jquery ---- dialog
<! 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> dialog box plug-in </title>
<Link href = "http://www.imooc.com/data/jquery-ui.css" rel = "stylesheet" type = "text/css"/>
<Link href = "style.css" rel = "stylesheet" type = "text/css"/>
<Script src = "http://www.imooc.com/data/jquery-1.8.2.min.js" type = "text/javascript"> </script>
<Script src = "http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type = "text/javascript"> </script>
</Head>
<Body>
<Div id = "divtest">
<Div class = "content">
<Span id = "spnName" class = "fl"> Zhang San </span>
<Input id = "btnDelete" type = "button" value = "delete" class = "fr"/>
</Div>
<Div id = 'Dialog-modal'> </div>
</Div>
<Script type = "text/javascript">
$ (Function (){
$ ("# BtnDelete"). bind ("click", function () {// ask button event
If ($ ("# spnName" ).html ()! = Null) {// if the object is not empty
Sys_Confirm ("Do you really want to delete this record? ");
Return false;
}
});
});
Function sys_Confirm (content) {// The Query Information Window is displayed.
$ ("# Dialog-modal"). dialog ({
Height: 140,
Modal: true,
Title: 'System prompt ',
Hide: 'slide ',
Buttons :{
'OK': function (){
$ ("# SpnName"). remove ();
$ (This). dialog ("close ");
},
'Cancel': function (){
$ (This). dialog ("close ");
}
},
Open: function (event, ui ){
Certificate (this).html ("");
$ (This). append ("<p>" + content + "</p> ");
}
});
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
