`

js+css+div模拟探出窗口

CSS百度 
阅读更多
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>弹出模态对话框测试[IE6下测试通过]</title>

<style type="text/css">
    .hideDlg
    {
        height:129px;width:368px;
        display:none;
    }
    .showDlg
    {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        height:129px;width:368px;
        position: absolute;
        align:center;
        z-index:5;
    }
    .showDeck {
        display:block;
        top:0px;
        left:0px;
        margin:0px;
        padding:0px;
        width:100%;
        height:100%;
        position:absolute;
        z-index:3;
        background:#cccccc;
        filter:"alpha(opacity=80)";
        opacity:"80/100";
        MozOpacity:"80/100";
    }
    .hideDeck {
        display:none;
    }
}
</style>

<script type="text/javascript">
    function showDlg()
    {
        //显示遮盖的层
        var objDeck = document.getElementById("deck");
        if(!objDeck)
        {
            objDeck = document.createElement("div");
            objDeck.id="deck";
            document.body.appendChild(objDeck);
        }
        objDeck.className="showDeck";
        //显示遮盖的层end
       
        //禁用select
        hideOrShowSelect(true);
       
        //显示对话框
        var w=368;
        var h=129;
        var dde=document.documentElement;
        var obox=document.getElementById('divBox');
       
        obox.style.left=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px";
        obox.style.top=dde.scrollTop+(dde.offsetHeight-h)/2+200+"px";
        document.getElementById('divBox').className='showDlg';
        //显示对话框end
    }
   
    function cancel()
    {
        document.getElementById('divBox').className='hideDlg';
        document.getElementById("deck").className="hideDeck";
        hideOrShowSelect(false);
    }
   
    function hideOrShowSelect(v)
    {
        var allselect = document.getElementsByTagName("select");
        for (var i=0; i<allselect.length; i++)
        {
            //allselect[i].style.visibility = (v==true)?"hidden":"visible";
            allselect[i].disabled =(v==true)?"disabled":"";
        }
    }
    function resize()
    {
        //调整位置
        var w=368;
        var h=129;
        var dde=document.documentElement;
        var obox=document.getElementById('divBox');
       
        if (obox.style.display !="none")
        {
            obox.style.left=dde.scrollLeft+(dde.offsetWidth-w)/2 +"px";
            obox.style.top=dde.scrollTop+(dde.offsetHeight-h)/2 +"px";
        }
    }
</script>

</head>

<body onresize="resize();">
    <input type="button" value="click me" onclick="showDlg();" size="10px" /><br/>
    <input type="text" value="" size="10px" /><a href="http://www.baidu.com" target="_blank">百度</a><br/>
    <select>
        <option selected="selected">1</option>
        <option>2</option>
    </select><br/>
    <div id="divBox" class="hideDlg" style="" >
            <table width="100%" style="height:100%; width: 100%;" id="table1">
                    <tr>
                        <td style="height: 20px; text-align: center;" colspan="3">请输入用户名及密码</td>
                    </tr>
                    <tr>
                        <td>用户名</td>
                        <td>
                            <input name="TextBox1" type="text" id="TextBox1" />
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <input name="TextBox2" type="text" id="TextBox2" /></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" name="Button1" value="Login" id="Button1" size="10" onclick="alert(TextBox1.value)"/>&nbsp;&nbsp;
                            <input type="button" name="Button2" value="Cancel" id="Button2" size="10" onclick="cancel();" />
                            </td>
                        <td>&nbsp;</td>
                    </tr>
            </table>
    </div>
</body>
</html>
分享到：
| 添加为首页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV + CSS + JAVASCRIPT + 模仿 HTML中select

    在网页设计中，"DIV + CSS + JAVASCRIPT + 模仿 HTML中select"是一个常见的技术实践，目的是为了在不使用HTML原生`&lt;select&gt;`元素的情况下，通过JavaScript和CSS来创建具有相同功能和交互体验的下拉选择器。...

    DIV+CSS+JS层模拟弹窗MSG

    在网页设计和开发中，"DIV+CSS+JS层模拟弹窗MSG"是一个常见的技术应用场景，主要用于实现网页上的消息提示、用户交互反馈等效果。这种技术利用HTML的`&lt;div&gt;`元素作为弹窗的基础结构，CSS来控制弹窗的样式和布局，而...

    js+css点击视频在弹出的小窗口中播放

    这通常涉及到CSS的使用，比如创建一个绝对定位的div来模拟弹出窗口，并将视频元素放入其中。以下是一个简单的CSS示例： ```css .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -...

    模仿windows窗口DIV+CSS

    总结来说，"模仿windows窗口DIV+CSS"是一个结合了HTML、CSS和JavaScript技术的综合应用，通过细致的样式设计和交互实现，能够在浏览器中创造出与Windows系统窗口相似的用户体验。这不仅是一种技术挑战，也是提升前端...

    模仿webQQ,采用js+div+css

    【标题】"模仿webQQ,采用js+div+css"所涉及的知识点主要集中在Web前端开发领域，特别是关于网页设计和JavaScript技术的应用。WebQQ是腾讯公司推出的一种基于Web浏览器的即时通讯服务，用户无需下载客户端，只需通过...

    div+css在线编辑器

    1. **实时预览**：用户输入的`div`和`CSS`代码会立即在右侧预览窗口中显示出来，无需刷新页面，大大提高了开发效率。 2. **代码高亮**：编辑器会对代码进行语法高亮，使得代码更易于阅读和理解，减少出错概率。 3. *...

    css+div圆角窗口

    对于IE8及以下版本，可能需要使用JavaScript库如jQuery的`.corner()`插件或CSS3PIE这样的工具来模拟圆角效果。 3. **div元素**： 在HTML中，`&lt;div&gt;`是一个非常常用的布局容器，可以容纳其他HTML元素，并通过CSS...

    Div模拟winows弹出窗口

    本主题“Div模拟Windows弹出窗口”就是关于如何利用这些技术创建一个与JavaScript内置`alert()`函数类似，但外观更加美观且可自定义的对话框。 首先，我们从HTML基础开始。在页面上，你需要一个隐藏的`div`元素，...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    Js CSS仿Windows桌面菜单及图标的效果.rar

    Js CSS仿Windows桌面菜单及图标的效果,用到了不少Ajax操作相关技巧，table 目录下是做得稍复杂一点的类似桌面效，test 目录是简单的,自己看吧 　调用方法如: 　a onclick="win('div1','标题','demo.htm','500','...

    div模拟弹出窗口，web2.0体现

    在网页设计中，"div模拟弹出窗口"是一种常见的交互技术，它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术在Web2.0时代得到了广泛应用，因为它提供了更丰富的用户体验，使得网站更具动态性和互动性...

    经典的DIV+CSS小代码

    这个例子展示了如何用JavaScript和CSS创建一个可拖动的弹出框。JavaScript将处理拖动逻辑，而CSS则用于设定样式和交互反馈。 7. **Js版Windows窗口模拟，兼容FF火狐，可拖动，可改变大小.htm** 这是一个更复杂的...

    移动端自定义下拉框【H5+js+css】

    在移动端开发中，自定义下拉框是一种常见的交互设计，它可以提供更好的用户体验，尤其是在空间有限的...通过熟练掌握HTML5、JavaScript和CSS，开发者可以构建出既美观又实用的移动端自定义下拉框，提升应用的用户体验。

    DIV+CSS网页设计效果2

    "Test Portal-prototype移动窗口"可能是指模拟窗口拖放和大小调整的功能，这是网页应用中的交互设计，通常需要JavaScript和CSS的配合来完成。JQuery等库可以简化这类交互的实现。 "简历demo"可能是一个使用DIV+CSS...

    html+css+js实现XP WINDOW界面

    在XP窗口界面中，JavaScript用于处理用户的交互，如点击按钮打开新窗口，拖动窗口改变位置，或者模拟窗口最小化、最大化和关闭的动画。这通常涉及到事件监听（如`addEventListener`）和DOM操作（如`innerHTML`, `...

    带有弹出层的模拟窗口（窗体）Div实现 源码

    在不使用浏览器插件或者JavaScript框架的情况下，我们可以使用HTML、CSS和JavaScript原生技术来创建一个带有弹出层的模拟窗口。本文将详细讲解如何利用Div元素来实现这一功能。 首先，我们需要理解Div元素。Div是...

    (HTML+js+css)遮罩层实现源码

    在本实例中，我们将探讨如何通过HTML、JavaScript和CSS来实现一个完整的遮罩层功能，包括loading提示和模拟模态窗口。 首先，让我们从HTML结构开始。一个简单的遮罩层通常包含一个主容器（例如一个`div`元素）以及...

    HTML+CSS+Javascript 模仿WIN 7任务栏

    通过使用`&lt;div&gt;`标签来定义各个部分，并通过`class`或`id`属性为CSS和JavaScript提供选择器，HTML可以实现布局和内容的组织。 CSS（Cascading Style Sheets）则用于美化和定制页面的样式。在本项目中，CSS将用于...

    div模拟窗口操作

    【标题】：“div模拟窗口操作” 在Web开发中，我们经常需要模拟窗口操作，例如创建可拖动、可缩放的区域，以实现自定义的交互界面。这种技术广泛应用于各种应用，如在线编辑器、桌面式Web应用或富文本编辑组件等。...

Magicbox
Global site tag (gtag.js) - Google Analytics