jquery.alerts jquery.bolckUI

最新推荐文章于 2020-07-11 09:30:56 发布

Alinaxz

最新推荐文章于 2020-07-11 09:30:56 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： function dialog button stylesheet xhtml input

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、改变原始的alert
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery AlertDialogs<</title>
<script src="_assets/js/jquery.js"type="text/javascript"></script>
<script src="_assets/js/jquery.ui.draggable.js"type="text/javascript"></script>
<script src="_assets/js/jquery.alerts.js"type="text/javascript"></script>
<link href="_assets/css/jquery.alerts.css"rel="stylesheet" type="text/css" media="screen"/>

<script type="text/javascript">

$(document).ready(function() {

$("#alert1").click(function() {
jAlert('error', 'This is the error dialog box with some extratext.', 'Error Dialog');
});

$("#alert2").click(function() {
jAlert('warning', 'This is the warning dialog along with some<u>html</u>.','Warning

Dialog');
});

$("#alert3").click(function() {
jAlert('success', 'This is the success dialog.', 'SuccessDialog');
});

$("#alert4").click(function() {
jAlert('info', 'This is the info dialog.', 'Info Dialog');
});

$("#confirm").click(function() {
jConfirm('Can you confirm this?', 'Confirmation Dialog',function(r) {
jAlert('success', 'Confirmed: ' + r, 'Confirmation Results');
});
});

$("#prompt").click(function() {
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog',function(r) {
if (r) alert('You entered ' + r);
});
});
});

</script>
</head>
<body>
<h1>jQuery AlertDialogs</h1>
<input id="alert1" type="button" value="Error"/>
<input id="alert2" type="button" value="Warning"/>
<input id="alert3" type="button" value="Success"/>
<input id="alert4" type="button" value="Info"/>
<input id="prompt" type="button" value="Prompt"/>
<input id="confirm" type="button" value="confirm"/>
</body>
</html>

2、利用blockUI 自制会自动消失

<script type="text/javascript"src="/waykers/js/jquery_min.js"></script>


<script type="text/javascript"src="/waykers/js/mygifts/jquery.blockUI.js"></script>
<script type="text/javascript"src="/waykers/js/mygifts/alert.js"></script>

Alert("请选择赠送对象！");

alert.js

functionAlert(message){ //代替alert

var mes="<div id='question' style='cursor:default'>"
+"<h3>"+message+"</h3>"
+"<input type='button' id='yes' value='确定'οnclick=\"cancle()\" />"
+" </div>";

$.blockUI({message: mes });
setTimeout($.unblockUI, 2000);

}

function cancle(){
$.unblockUI();
return false;
}