JS 实现了 alert 和 config 的效果

1、注意该案例不支持IE6,最后用支持CSS3 样式的浏览器查看,可以在iframe框架用,可以遮住整个框架

2、alert 弹出框效果图

3、config 弹出框效果图

4、如果用这框架里面,必须在框架里导入3个文件一个jquery里的包,一个是实现效果的Js文件,还有个是样式文件

   在框架里的页面需要这样调用 (测试页面为 Test.aspx)

 
 代码如下 复制代码
   <title>iframe里的页面</title>
<script type="text/javascript">
    function showClick() {
        parent.Message.config("config 弹出框测试,是否删除?", function (f) {
            if (f) { parent.Message.alter("点击Ok按钮"); } else { parent.Message.alter("点击Cannel按钮"); }
        });
    }
    function showClick2() {
        parent.Message.alter("alert 弹出框测试");
    }
</script>
</head>
<body>
   
 
 alert弹出框:  <input type="button"  value="alert" onclick="showClick2()" /><br />
 config弹出框:<input type="button"  value="config" onclick="showClick()" /><br />
 
</body>
</html>

5、不在框架里应用 也要导入上面3个文件 用法如下(测试页面:Default3.aspx)
 

 代码如下 复制代码
<title>不知 iframe 弹出框</title>
    <link href="LayPannel/Default/LayStyle.css" rel="stylesheet" type="text/css" />
    <script src="LayPannel/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="LayPannel/LayPannelJs.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showClick() {
            Message.config("config 弹出框测试,是否删除?", function (f) {
                if (f) { Message.alter("点击Ok按钮"); } else { Message.alter("点击Cannel按钮"); }
            });
        }
        function showClick2() {
            Message.alter("alert 弹出框测试");
        }
</script>
</head>
<body>
     alert弹出框:  <input type="button"  value="alert" onclick="showClick2()" /><br />
 config弹出框:<input type="button"  value="config" onclick="showClick()" /><br />
</body>
</html>
 

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索框架
, iframe
, 文件
, 测试
, 代码
aspx
js实现alert阻塞、js实现alert、js alert效果、js实现拖拽效果、js实现倒计时效果,以便于您获取更多的相关知识。

时间: 2024-09-08 05:16:12

JS 实现了 alert 和 config 的效果的相关文章

JS上传图片前实现图片预览效果的方法

 这篇文章主要介绍了JS上传图片前实现图片预览效果的方法,涉及javascript操作图片的技巧,需要的朋友可以参考下     本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns=&quo

JS实现倒计时和文字滚动的效果实例

 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现 前台部分的完整代码如下: 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serve

JS实现可关闭的对联广告效果代码_javascript技巧

本文实例讲述了JS实现可关闭的对联广告效果代码.分享给大家供大家参考.具体如下: 这是非常经典的一款对联广告代码,带有关闭按钮,用户可以自行关掉广告,另外,广告的垂直位置会随着滚动条的变化自动定位,也就是拖动浏览器滚动条的时候广告始终显示,不会被隐藏掉,现在很多网站都在用的对联广告代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-2adv-style-codes/ 具体代码如下: <html> <head

JS实现倒计时和文字滚动的效果实例_javascript技巧

本文实例讲述了JS实现倒计时和文字滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现 前台部分的完整代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.o

移动端H5开发 Turn.js实现很棒的翻书效果_javascript技巧

最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! Turn.js的官方网址: http://www.tu

JS实现的左侧竖向滑动菜单效果代码_javascript技巧

本文实例讲述了JS实现的左侧竖向滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款经过改造的左侧竖向滑动菜单,基于JavaScript+CSS,没有过多的修饰,主要想实现菜单的动画效果,想用的朋友,自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-left-scroll-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

js实现仿京东2级菜单效果(带延时功能)_jquery

本文实例讲述了jquery实现仿京东2级菜单效果.分享给大家供大家参考.具体如下: 这里介绍js实现仿京东2级菜单效果代码,带有延时功能,操作上更加舒适自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

JS简单实现多级Select联动菜单效果代码_javascript技巧

本文实例讲述了JS简单实现多级Select联动菜单效果代码.分享给大家供大家参考.具体如下: JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常用的一款菜单,Select联动状态的菜单,网页上经常见到的效果,希望大家能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-select-ld-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD

JS上传图片前实现图片预览效果的方法_javascript技巧

本文实例讲述了JS上传图片前实现图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met