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

- 日理万妓 2022-01-09 05:53 262阅读 0赞

##  ##

## 功能概述 ##

##          web开发中，很多页面中用alert弹出提示，很不美观，可以用自定义的页面弹出提示窗口美化一下，更人性化展示。要方便开发人员的使用、调用。    ##

## 页面效果    ##

![Center][]![Center 1][]![Center 2][]

## 功能构件 ##

1.本例采用jquery提供的alert插件，可根据需要扩展了部分功能脚本。需要引入基础资源如下：jquery.js、jquery-ui-1.8.16.custom.min.js、jquery.alerts.js、jquery.alerts.css。

2.页面调用如下：

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &nbsp; &lt;script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt; &nbsp; &lt;link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" /&gt;&nbsp; &nbsp; &lt;script src="jquery.alerts.js" type="text/javascript"&gt;&lt;/script&gt;&nbsp; ... &lt;script type="text/javascript"&gt; $(document).ready(function () {&nbsp; &nbsp; &nbsp;$("#btnAlert").click(function () { &nbsp; &nbsp; &nbsp;jAlert('Pushed the alert button', 'Alert Dialog');&nbsp; &nbsp; &nbsp;}); //Alert型弹出窗口 &nbsp; &nbsp;$("#btnPrompt").click(function () {&nbsp; &nbsp; &nbsp; &nbsp;jPrompt('Type some value:', '', 'Prompt Dialog', function (typedValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (typedValue) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;jAlert('You typed the following ' + typedValue);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp;}); //Prompt型弹出窗口 &nbsp; &nbsp;$("#btnConfirm").click(function () { &nbsp; &nbsp; &nbsp;jConfirm('confirm the alert button', 'Confirm Dialog');&nbsp; &nbsp; &nbsp;}); //confirm型弹出窗口 });&nbsp; function callbackResult(param){ &nbsp; return param+":absdf"; }//这个是回调方法的例子 function divAlert(message){ &nbsp; jAlert(message, '提示'); } &lt;/script&gt; 。。。 &lt;input type="button" value="Alert Me" id="btnAlert" /&gt;&nbsp; &lt;input type="button" value="Prompt Me" id="btnPrompt" /&gt;&nbsp; &lt;input type="button" value="confirm Me" id="btnConfirm" /&gt;&nbsp; &lt;input type="button" value="alert提示" οnclick="divAlert('请选择行政区域!')" /&gt;&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

[Center]: https://img-blog.csdn.net/20130714204058515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuX2Rr/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20130714204105750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuX2Rr/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220109/6a1c86d45c084a069fc8c4bb1cc9cc96.png