<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JS模拟模式窗口效果</title>
</head>
<script>
    var falpha = 0;
    function fchange() {
        if (falpha != 90) {
            table1.style.filter = "alpha(opacity=" + falpha + ")";
            falpha = falpha + 10;
            setTimeout("fchange()", 200)
        } else {
            falpha = 0;
        }
    }
    function sss() {
        table1.style.height = (window.document.body.clientHeight > window.document.body.scrollHeight) ? window.document.body.clientHeight : window.document.body.scrollHeight;
        table1.style.width = "100%";
        table1.style.display = 'block';
        table2.style.left = window.document.body.scrollWidth / 2 - 100;
        table2.style.top = window.document.body.offsetHeight / 2 - 100;
        table2.style.display = 'block';
        fchange();
    }

function freset() {
        table1.style.display = 'none'
        table2.style.display = 'none'
    }

</script>
<body topmargin="0" leftmargin="0" bgcolor="yellow" style="display: block;">
    <!-- 屏蔽层 -->
    <table id="table1" style="background: #FFFFFF; display: none; position: absolute;
        z-index: 1; filter: alpha(opacity=90)" οncοntextmenu="return false">
        <tr width="100%" height="100%">
            <td>
    </table>
    <table οncοntextmenu="return false" id="table2" border="2" style="background: #E1E100;
        border-color: red; display: none; position: absolute; z-index: 2; width: 200;
        height: 100;" cellspacing="0" cellpadding="0" bordercolor="#800000">
        <tr width="150" height="20">
            <td align="right" bordercolor="#E1E100">
                <input type="button" οnclick="freset()" value='确定'>
            </td>
            <td bordercolor="#E1E100">
                <input type="button" οnclick="freset()" value='取消'>
            </td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>
        <br>
        <br>
        <br>
        <br>
        <input type="button" οnclick="sss()" value='申请提交'>
    </p>
</body>
</html>

js实现的简单模态对话框相关推荐

  1. php对话框制作,js制作一个简单的对话框教程

    这篇文章主要为大家详细介绍了js实现简易聊天对话框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js实现简易聊天对话框的具体代码,供大家参考,具体内容如下 聊天对话框 *{f ...

  2. antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery

    Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...

  3. 手机网页里的模态对话框

    今日帮朋友写了一个手机网页里用的模态对话框,防止自己日后忘记,所以mark一下.原理很简单,当弹出了模态对话框的时候,就是touchmove事件进行监听,如果是对话框的touchmove事件,就允许拖 ...

  4. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...

  5. Bootstrap3 静态模态对话框

    模态对话框 JavaScript内置了 3 种对话框:alert().prompt().confirm().alert() 只是一个简单的提示对话框,prompt() 可以接受用户输入的信息,conf ...

  6. Bootstrap 模态对话框

    模态对话框 JavaScript内置了 3 种对话框:alert().prompt().confirm().alert() 只是一个简单的提示对话框,prompt() 可以接受用户输入的信息,conf ...

  7. php中用js自定义弹窗,用js实现的自定义的对话框的实现代码_javascript技巧

    大家好,我们平时在使用Javascript的时候,经常会需要给用户提供一些反馈信息,完成这个功能有很多种方法.但在平时开发中午我们用的最多的可能就是alert这个函数了(这里只说一般情况,不排除个别高 ...

  8. JS中ShowModalDialog(模态窗口)详细使用

    基本介绍:           showModalDialog()         (IE 4+ 支持)           showModelessDialog()      (IE 5+ 支持) ...

  9. 使用Jquery仿模态对话框插件Remodal实现弹出响应窗口

    remodal是一个轻量级.扁平化.响应式模态窗口,可以监测浏览器的大小自适应的的窗口.使用声明式状态符号和哈希(Hash)跟踪.所有现代的浏览器都支持. 首先它是一个插件.下载之后解压,dist中放 ...

最新文章

  1. linux红帽网页中文乱码解决,【linux学习笔记】安装redhat时中文显示乱码(小方框)解决方法...
  2. python py生成及调用pyd(so)文件
  3. code Gym 100500D T-shirts(暴力)
  4. 数据可视化模板_10分钟,做一份数据可视化分析报表
  5. ajax回复留言,Ajax 留言板模拟
  6. java http 上传文件_java利用httpClient实现后台文件上传请求
  7. IDEA/Pycharm 插件与主题切换
  8. 基于文本和语音的双模态情感分析
  9. java constructors_[译]understanding constructors
  10. SATI阅读重点有哪些?
  11. 2019111 控制台上实现极乐净土(有图有背景音乐)
  12. 根据IP统计网站访问次数
  13. 路由控制配置route-policy命令解析
  14. 拜托,请给我贫寒简单的生活!
  15. 改革IMF首先要增加中国发言权
  16. ECC椭圆曲线加密的特点以及在有限域(Fp)的三点共线问题
  17. 我以为猫咪牙齿断了一点不要紧,结果…
  18. 京冀101家饭店跻身北京2022年冬奥会官方接待签约名单
  19. 微信开通检测软件的使用方法(入门教程)
  20. 面试-JVM-类加载-类加载器--自定义类加载器-JVM调优

热门文章

  1. vs2013 编译 notepad++ 源代码 2014-7-23
  2. 六:Cocos2d-x的CCLayer
  3. ”这个动作需要从没有授权的软件源来安装软件包“解决办法
  4. 石家庄地铁查询PSP0级
  5. Windows 10安装pip方法
  6. 基本数据类型float和double的区别
  7. easyui datagrid
  8. struts2配置文件(简单)
  9. DRM-内容数据版权加密保护技术学习(上):视频文件打包实现(转)
  10. 复制文件时怎么保留权限