功能概述
web开发中,很多页面中用alert弹出提示,很不美观,可以用自定义的页面弹出提示窗口美化一下,更人性化展示。要方便开发人员的使用、调用。
页面效果
功能构件
1.本例采用jquery提供的alert插件,可根据需要扩展了部分功能脚本。需要引入基础资源如下:jquery.js、jquery-ui-1.8.16.custom.min.js、jquery.alerts.js、jquery.alerts.css。
2.页面调用如下:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> <link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" /> <script src="jquery.alerts.js" type="text/javascript"></script> ... <script type="text/javascript"> $(document).ready(function () { $("#btnAlert").click(function () { jAlert('Pushed the alert button', 'Alert Dialog'); }); //Alert型弹出窗口 $("#btnPrompt").click(function () { jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) { if (typedValue) { jAlert('You typed the following ' + typedValue); } }); }); //Prompt型弹出窗口 $("#btnConfirm").click(function () { jConfirm('confirm the alert button', 'Confirm Dialog'); }); //confirm型弹出窗口 }); function callbackResult(param){ return param+":absdf"; }//这个是回调方法的例子 function divAlert(message){ jAlert(message, '提示'); } </script> 。。。 <input type="button" value="Alert Me" id="btnAlert" /> <input type="button" value="Prompt Me" id="btnPrompt" /> <input type="button" value="confirm Me" id="btnConfirm" /> <input type="button" value="alert提示" οnclick="divAlert('请选择行政区域!')" /> |