jQuery--對話方塊外掛程式--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>對話方塊外掛程式</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">張三</span>
<input id="btnDelete" type="button" value="刪除" class="fr"/>
</div>
<div id='dialog-modal'></div>
</div>
<script type="text/javascript">
$(function () {
$("#btnDelete").bind("click", function () { //詢問按鈕事件
if ($("#spnName").html() != null) { //如果對象不為空白
sys_Confirm("您真的要刪除該條記錄嗎?");
return false;
}
});
});
function sys_Confirm(content) { //彈出詢問資訊視窗
$("#dialog-modal").dialog({
height: 140,
modal: true,
title: '系統提示',
hide: 'slide',
buttons: {
'確定': function () {
$("#spnName").remove();
$(this).dialog("close");
},
'取消': function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).html("");
$(this).append("<p>" + content + "</p>");
}
});
}
</script>
</body>
</html>