web页面控件之-模拟页面alert提示

功能概述

         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('请选择行政区域!')" />