JS模拟模式窗口效果

最新推荐文章于 2019-09-26 09:41:55 发布
最新推荐文章于 2019-09-26 09:41:55 发布
阅读量1k 收藏
点赞数
分类专栏： JavaScript 文章标签： table button function input filter border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diligentcatrich/article/details/6745493
版权
 

<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>

一剑平江湖
关注
专栏目录
JavaScript之实例练习（模态对话框详解）
Viewinfinitely的博客
05-13 670
文章目录一、Class的属性二、模态对话框 一、Class的属性 1、class的常用操作 获取对象所有class： elementNode.className 给对象添加class：elementNode.classList.add 给对象去除class：elementNode.classList.remove 2、练习代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
JS自定义模式窗口
10-26
在JavaScript（JS）编程中，模式窗口（Modal Window）是一种常见的用户交互设计，它用于创建一个弹出式界面，使得用户必须与该窗口交互后才能继续操作主页面。这种技术常用于表单填写、信息确认、登录验证等场景。本...
JavaScript实现模态对话框
热门推荐
jjjndk1314的博客
03-25 2万+
代码演示： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; # 文本框 .conten
JavaScript 实现模态对话框 源代码大全
wonsoft的专栏
04-30 3952
JavaScript实现模态对话框 一、JavaScript实现模态对话框首先，来说一下对话框：对话框在Windows应用程序中使用非常普遍，许多应用程序的设定，与用户交互需要通过对话框来进行，因此对话框是Windows应用程序中最重要的界面元素之一，是与用户交互的重要手段。对话框是一个特殊的窗口，任何对窗口进行的操作（如移动、最大化、最小化等）也可以在对话框实施。  对话框大致可以分
JavaScript----实现简单的模态对话框
weixin_42567323的博客
09-26 713
前言     做一个模态对话框的小例子。 1.简单设计     学了一些js的知识以后，这里就结合HTM和CSS来做一个简单的模态对话框。     要实现的功能：点击添加按钮，就让背景色变成灰色，然后出现一个对话框，在对话框中点击取消，就又回到原来的页面。 2.实现 （1）先实现...
js模拟F11页面全屏显示
10-16
在现代浏览器中，提供了一些JavaScript API来控制全屏模式，允许开发者在不使用F11按键的情况下，通过编程方式让页面全屏显示或退出全屏状态。以下详细介绍。 首先，是全屏API的兼容性处理。不同浏览器厂商对于全屏...
jQuery模式弹出确认窗口.zip
07-11
这个“jQuery模式弹出确认窗口”示例，是jQuery特效的一个应用，它提供了一种优雅的方式来模拟系统原生的确认对话框，给用户带来更好的体验。 在传统的网页开发中，当需要用户确认某个操作时，如删除或者提交信息，...
JavaScript模拟桌面窗口实例：功能与实现详解
本文将详细介绍如何使用JavaScript在网页上实现一个模拟桌面窗口的效果，包括窗口的基本操作功能。首先，通过HTML结构来构建这个窗口的框架，定义了一个名为`#box`的元素，它具有绝对定位，设置在页面的中心位置，...
html和javascript技术实现模式窗口传参数示例
12-30
本示例主要探讨如何使用这两种技术实现模式窗口（Modal Window）并传递参数，同时展示蒙板对话框的效果。 首先，让我们了解什么是模式窗口。模式窗口是一种特殊的对话框，当它打开时，用户必须先与其交互才能访问...
js实现div模拟模态对话框展现URL内容
10-22
主要介绍了js实现div模拟模态对话框展现URL内容的功能,涉及javascript动态操作页面元素样式与ajax调用的相关技巧,需要的朋友可以参考下
js实现模态窗口的3种方式
12-15
用js控制显示窗口3种方法，可以改造，拿来就可以用
js仿Windows窗口
10-15
To make it easier for you, please have a look at ALL of the following samples. Most probably your upcoming question during developing with WinLIKE will be answered here. Please see the source code of the samples and the associated files to learn how you can define and use the many features of WinLIKE. Now move your mouse over the screenshots and get a short description of the samples. Then simply click to start. JS仿微软窗口效果
js中模态对话框(showModalDialog)示例
penghuaiyi2008的专栏
09-11 368
1.commune_create.jsp [code="java"] 系统主操作区页面模板 function openSelectAdmin(){ var reval=window.showModalDialog("${ctx}/page/selectadmin/admin_select.jsp","","dialogHeight=400px...
js之模态对话框
weixin_34280237的博客
12-31 188
目标效果：点击页面按钮，显示模态对话框，在模态对话框里点击取消关闭模式对话框。 效果如下 实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </he...
用JS实现模式对话框的方法
lujianfeiccie2009的专栏
01-21 1644
主要是用div层的技术实现的,　具体看下面的代码 //Author:lujianfei //Date:2012-1-21 function sAlert(str){ var msgw,msgh,bordercolor; msgw=400; //The width of msg; msgh=100; //The height of title o
js模式对话框实现用户登录
xly_971223的专栏
02-13 402
以前看过别人写的用js的showModalDialog做用户登录 今天闲着没事做了一下 感觉不错 采用ModalDialog做登录，最大优点就是省去了传递url的麻烦 下面列出关键代码 当作备忘吧 父窗口代码：window.showModalDialog('login.jsp', window);//这个window作为参数传递到子窗口，当登录成功后可通过这个对象刷新父窗口 子窗口代码： ...
利用javascript打开模态对话框(示例代码)
hemeinvyiqiluoben的专栏
06-20 4648
本篇文章主要是对利用javascript打开模态对话框的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助 1. 标准的方法 复制代码代码如下:     function openWin(src, width, height, showScroll){    window.showModalDialog (src,"","location:No;st
真正的模式对话框-js
wumiju的专栏
02-24 3671
真正的模式对话框          /*用来显示模式对话框的方法*/    function show()    {    /*var mValue接收对话框回传的值*/     var mValue=showModalDialog("m.html","向对话框传参","dialogWidth:200px;dialogHeight:200px;status:0;help:0");
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值