`
conkeyn
  • 浏览: 1530587 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

使用openDIV.js做遮罩层

JavaScriptXHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>openDiv 实例</title>
<script type="text/javascript" src="openDiv.js"></script>
<script type="text/javascript">
// 调用Demo即可。
function Demo(string){    
  ScreenConvert();    
  var ShowDiv="<div style=\"padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";    
  DialogShow(ShowDiv,250,120,300,100);    
} 
</script>
</head>

<body>
<input type="text" name="ss" value="sdfsdf"/>
<input type="button" value="显示遮罩层" onclick="Demo('dsfsdfdsfs')"/>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

 文件及案例：

分享到：
| javascript 预览图片,只支持IE
评论
发表评论

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

相关推荐

    js打开关闭遮罩层

    在本主题中，我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭，并结合loading图片以增强用户体验。 一、JavaScript基础 JavaScript是一种广泛使用的客户端脚本语言，它可以直接在用户的浏览器中运行，...

    js 弹出遮罩层

    在JavaScript编程中，"弹出遮罩层"是一种常见的用户界面设计手法，它通常用于创建一个半透明的覆盖层，以突出显示特定区域或者暂停其他交互，为用户提供一种聚焦的体验。例如，当我们需要显示模态对话框、加载提示...

    JS弹出遮罩层

    在JavaScript（JS）中实现遮罩层功能可以提供更加灵活和动态的用户体验。本篇将详细介绍如何使用JavaScript来创建一个实用的遮罩层，尤其适用于登录和注册场景。 首先，我们需要在HTML页面中设置基础结构。创建一个...

    前端-商品遮罩层（多种方法实现）

    本主题主要探讨如何使用Web技术，包括JavaScript、CSS和HTML，来实现商品遮罩层的多种方法。 1. **HTML 结构**： 首先，我们需要构建基础的HTML结构。一个简单的商品遮罩层可能包含一个`&lt;div&gt;`作为遮罩层容器，...

    js 弹出窗口 弹出div window 支持遮罩、拖动、嵌入页面、换肤等实用功能

    实现这一效果通常涉及到CSS的透明度和定位属性，以及JavaScript来动态调整遮罩层的大小和显示。 2. **拖动功能**：弹出窗口的拖动功能允许用户通过鼠标移动窗口的位置。这需要监听鼠标的mousedown、mousemove和...

    JS+CSS兼容的遮罩层

    本教程将详细讲解如何使用JavaScript和CSS实现一个兼容各浏览器的遮罩层。 一、HTML基础布局 首先，我们需要在HTML文档中创建一个用于展示遮罩层的基本结构。可以创建一个`&lt;div&gt;`元素作为遮罩层容器，再创建一个...

    Jquery遮罩层组件

    3. **回调函数**：组件提供了 `open` 和 `closed` 回调函数，可以在遮罩层打开或关闭时执行特定操作，增强交互体验。 4. **嵌套遮罩层**：Jquery-reveal 支持在一个遮罩层内嵌套另一个遮罩层，实现更复杂的交互设计...

    几个实用的jQuery弹出遮罩层例子

    确保遮罩层在不同屏幕尺寸下也能正常工作，可以使用媒体查询调整样式。 6. **自定义动画**：除了基本的淡入淡出效果，jQuery还提供了许多其他动画效果，如滑动、缩放等，可以根据需求定制弹出和关闭的动画效果。 ...

    遮罩层弹窗效果

    EasyDialog可能是预封装了上述功能的JavaScript库，允许开发者通过简单的API调用来快速创建具有遮罩层效果的弹窗，例如： ```javascript EasyDialog.open({ title: '提示', content: '这是一条消息', buttons: ...

    layer.js用法例子

    `layer.js` 是一个轻量级的JavaScript弹层插件，主要用于实现网页上的各种提示层、对话框以及模态窗口的效果。虽然它并不专注于提供复杂的功能组件，但其简洁易用的API和丰富的样式使得在页面美化和交互设计上非常...

    JQuery中遮罩层progressDialog 简单使用

    要使用`jQuery UI`的`dialog`来实现遮罩层效果，首先需要在项目中引入`jQuery`和`jQuery UI`的CSS和JS文件。你可以在官方网站上下载最新版本的库，或者通过CDN链接直接引用： ```html &lt;!-- 引入jQuery --&gt; ...

    jQuery点击按钮弹出遮罩层并固定居中特效源码.zip

    这里使用`fadeIn`方法逐步改变遮罩层的透明度，以实现平滑的动画效果。 5. **关闭遮罩层**：通常还需要添加一个关闭按钮或者点击遮罩层本身来关闭它。可以监听遮罩层的点击事件，或者在特定按钮上绑定关闭逻辑。 ...

    jQuery 遮罩层

    除了手动创建遮罩层，还可以使用jQuery插件，如`jquery.modal.js`或`jQuery UI Dialog`等，它们提供了更多的功能和自定义选项，比如拖动、调整大小、自动定位等。 总结，jQuery的遮罩层功能是构建交互式Web应用的...

    解决layer弹层遮罩挡住窗体的问题

    当使用layer弹层组件时，如果弹出的窗口内容（content）是一个DOM元素，例如一个嵌入在某个div内的对话框，可能会出现遮罩层覆盖在弹窗上的情况，导致用户无法正常操作弹窗内容。这个问题主要是由于遮罩层的DOM元素...

    web前端页面加mask遮罩

    - **位置**：使用`position: fixed`让遮罩层覆盖整个屏幕，不受页面内容滚动影响。 - **尺寸**：设置`width`和`height`为`100%`，确保遮罩层填充整个视口。 - **颜色和透明度**：通常使用`background-color`设置...

    css3实现的点击按钮弹出无刷新交互遮罩层特效源码.zip

    &lt;button id="openModal"&gt;打开遮罩层 &lt;div id="modal" class="modal"&gt; &lt;div class="modal-content"&gt; &lt;!-- 遮罩层内容 --&gt; &lt;/div&gt; &lt;/div&gt; ``` 2. **CSS3样式设置**： - **遮罩层样式**：为`#modal`设置一个...

    js遮罩效果，基于jQuery (1.3.2)

    "ThickBox 3_1.htm"可能是Thickbox插件的一个实例演示，而"Thickbox-js遮罩,基于jQuery、openDiv"可能是关于如何打开和关闭遮罩层的代码片段。"ThickBox 3_1_files"和"javascript浮动div，可拖拽div,遮罩层(div和...

    基于JavaScript如何制作遮罩层对话框

    JavaScript制作遮罩层对话框是一种常见的网页交互设计技术，它能提供一种模式化的用户体验，使得用户在特定对话框出现时无法与页面其他部分互动。以下将详细解释如何使用JavaScript实现这一功能。 首先，遮罩层...

    jquery实现点击按钮弹出带有过渡效果的遮罩层窗口动画效果源码.zip

    本资源"jquery实现点击按钮弹出带有过渡效果的遮罩层窗口动画效果源码.zip"提供了使用jQuery创建动态、具有过渡效果的遮罩层窗口的代码示例，这对于构建用户友好的网页界面非常有用。 首先，我们要理解jQuery中的...

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