<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对话框插件</title>
<style type="text/css">
body
{
font-size: 62.5%;
}
#divtest
{
width: 282px;
}
#divtest .content
{
background-color: #eee;
padding: 8px;
height: 23px;
line-height: 23px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="https://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 +"aa"+ "</p>");
}
});
}
</script>
</body>
</html>
通过点击事件将一个普通的div变为弹窗提示