<!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>无标题文档</title>
<script src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
position:relative;
}
#pop_up{
width:100%;
position:absolute;
}
#pop_head{
height:30px;
}
#tl,#tc,#tr,#bl,#bc,#br{
position:absolute;
background-image:url(d_bg.gif);
background-color:#ccc;
}
#tl, #tc, #tr{
height:30px;
}
#tl{
background-repeat:no-repeat;
background-position:0 0;
width:5px;
}
#tc{
background-position:0 -30px;
background-repeat:repeat-x;
left:5px;
right:5px;
width:auto;
}
#tr{
background-position:0 -60px;
background-repeat:no-repeat;
width:5px;
right:0;
}
#bl,#bc,#br{
height:32px;
}
#bl{
background-repeat:no-repeat;
background-position:0 -90px;
width:5px;
}
#bc{
background-repeat:repeat-x;
background-position:0 -122px;
left:5px;
right:5px;
width:auto;
}
#br{
background-repeat:no-repeat;
background-position:0 -154px;
right:0;
width:5px;
}
#pop_content{
border-left: 1px solid #005195;
border-right:1px solid #005195;
}
#tc span{
padding-left:12px;
line-height:30px;
}
#main_content{
padding-left:12px;
padding-right:12px;
padding-top:6px;
padding-bottom:6px;
}
#pop_foot{
position:relative;
}
#xbtn{
position:absolute;
background: url(cbtn.gif) no-repeat;
background-position:0 0;
right:20px;
width:43px;
height:19px;
cursor:pointer;
}
#cbtn,#obtn{
background:url(obtn.gif) no-repeat;
width:60px;
height:21px;
position:absolute;
text-align:center;
line-height:22px;
font-size:12px;
cursor:pointer;
}
#cbtn{
right:90px;
top:6px;
}
#obtn{
right:20px;
top:6px;
}
</style>
</head>
<body>
<input type="button" value="button" id="btn" />
<div id="div1" style="display:none">
<div id="pop_up">
<div id="pop_head">
<div id="tl"></div>
<div id="tc"><span>pop_up_head</span></div>
<div id="tr"></div>
<div id="xbtn" onclick="closePop()" onmouseenter="this.style.backgroundPosition = '0 -19px'" onmouseout="this.style.backgroundPosition = '0 0'"></div>
</div>
<div id="pop_content" style="height:238px">
<div id="main_content">pop_up_content</div>
</div>
<div id="pop_foot">
<div id="bl"></div>
<div id="bc"></div>
<div id="br"></div>
<div id="cbtn" onclick="closePop()" onmouseenter="this.style.backgroundPosition = '0 -21px'" onmouseout="this.style.backgroundPosition = '0 0'">取消</div>
<div id="obtn" onclick="confirmPop()" onmouseenter="this.style.backgroundPosition = '0 -21px'" onmouseout="this.style.backgroundPosition = '0 0'">确定</div>
</div>
</div>
</div>
<div id="test"></div>
</body>
<script type="text/javascript">
/*
* 简单弹框，ie8，ff，opera中测试可用，其余浏览器未测；
*****made by keimon*****
*******2013-01-09******
*/
$('#btn').click(function(){
var maskObj = document.createElement('div');
maskObjStyle = {
width:'100%',
height:'100%',
backgroundColor: '#000',
opacity:'0.1',
zIndex:998,
position:'fixed',
top:0,
left:0
}
$(maskObj).css(maskObjStyle);
$(maskObj).attr('id','maskId')
$('body').append(maskObj);
var popObj = document.createElement('div');
popObjStyle = {
width:'400px',
height:'300px',
position:'fixed',
backgroundColor:'#fff',
border:'1px solid #999',
marginLeft:'-200px', //弹框宽度的一半；
marginTop:'-150px', //弹框高度的一半
left:'50%',
top:'50%',
zIndex:999
}
$(popObj).css(popObjStyle);
$(popObj).attr('id','popId');
$(popObj).html($('#div1').html())
$('body').append(popObj);
})
function closePop(){
$('#maskId').remove();
$('#popId').remove();
}
function confirmPop(){
closePop();
//点击确定按钮以后发生的事件；
$('#test').html($('#tc').html())
}
</script>
</html>
相关推荐
这篇内容将深入探讨如何利用jQuery（jq）来实现自定义样式的弹框，以"简易弹框示例"为例，展示如何根据前端设计进行样式调整。 首先，我们需要理解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了...
总结一下，实现Vue中简单弹框Dialog的方法主要包括： 1. 创建一个Vue组件，包含一个可显示/隐藏的弹框和一个遮罩层。 2. 通过`props`接收父组件传入的`isShow`值，控制弹框的显示与隐藏。 3. 添加关闭按钮和点击遮罩...
例如，JavaScript中的`alert()`函数就能创建一个简单的弹框，用于显示警告信息并要求用户点击“确定”按钮才能继续操作。 二、弹出层 弹出层比弹框更复杂，它可以在页面背景半透明或变暗的情况下，展示一个可自定义...
1. **易用性**：由于是基于jQuery，所以开发者只需要通过简单的API调用，就能创建和控制弹框的显示、隐藏、位置和内容。 2. **可定制性**：插件通常提供了丰富的选项和配置，允许开发者自定义弹框的外观，包括大小...
content: '这是一个简单的弹框', button: [ { name: '确定', callback: function () { console.log('点击了确定'); } } ] }); ``` 这段代码会弹出一个包含“确定”按钮的对话框，点击按钮后会在控制台打印...
ArtDialog是一款基于Prototype.js或jQuery库的对话框组件，支持多主题、可自定义样式，并提供了丰富的API接口，使得在网页中创建弹框变得简单易行。它的主要特点是响应式布局、高性能和跨浏览器兼容性，支持IE6+及...
本文将详细解析"简单实用的弹框加遮罩和关闭按钮"的实现方法，以及如何利用JavaScript（jq）进行扩展和自定义。 首先，"弹框"（Modal）是一种浮动于主页面内容之上的窗口，通常用于展示详细信息或执行特定任务。...
这种弹框通常包含一个进度条、动画或者简单的文本信息，让用户知道操作正在进行。 2. **弹框设计**： 这个项目中的“老鼠”元素为等待界面增添了趣味性，使得原本枯燥的等待过程变得有趣。设计师通过动画或者动态...
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。 v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的...
1. **警告对话框**：类似于浏览器原生的alert，用于显示简单消息并要求用户确认。在jQuery中，我们可以使用`.alert()`方法创建这样的弹框，但需要自定义HTML和CSS来达到与原生弹框不同的样式。 2. **确认对话框**：...
总结起来，"dialog自制简单拖拽弹框"涉及的主要知识点包括：jQuery库的使用、DOM操作、事件监听与处理（mousedown, mousemove, mouseup）、CSS样式控制（尤其是定位和尺寸调整）、模态与非模态的实现。通过学习和...
在.NET Compact Framework（.NET CF）下，C#提供了System.Windows.Forms命名空间，其中包括 MessageBox 类，它用于显示简单的信息、警告或确认对话框。然而，MessageBox默认并不支持自动关闭，所以我们需要创建...
- **信息/提示弹框**：简单地显示信息，不需用户响应，如“更新已完成”。 2. **设计原则**： - **清晰度**：弹框内容应简洁明了，避免使用复杂的专业术语。 - **一致性**：在整个应用中保持弹框样式一致，以...
2. **自定义弹框**：虽然原生的JS弹框简单易用，但样式单一，无法满足复杂需求。因此，开发者通常会创建自定义弹框，通过HTML和CSS构建弹框的结构和样式，然后使用JS控制弹框的显示与隐藏。这些自定义弹框可以更美观...
在iOS中，弹框通常被用来显示临时的通知、询问用户输入或者进行一些简单的操作。常见的弹框类型有UIAlertView、UIAlertController等，但这些系统提供的组件可能无法满足开发者对于设计细节的精确控制需求，因此...
这是一个简单的HTML Demo，实现了点击按钮后出现一个遮罩层，在层上实现弹框效果，在框中可以自定义消息，或者内容。
4. **API接口**：提供丰富的API接口供开发者调用，可以控制弹框的显示、隐藏、设置内容、绑定事件等，使得与现有应用集成变得简单。 5. **样式定制**：为了满足不同设计风格的需求，插件通常会提供一系列CSS类或...
根据提供的文件信息，本文将详细解析“js右下角...通过上述分析可以看出，利用简单的HTML、CSS和JavaScript即可实现一个实用的右下角弹框效果。这种技术不仅适用于广告推广，也广泛应用于网站的各种通知和提醒场景中。
它在告知用户简单信息或警告时非常有用，如“保存成功”或“未找到数据”。 在描述中提到的“刷心样式”，可能是指为弹框和遮罩层添加自定义的视觉效果，以提升用户体验。例如，通过CSS动画，我们可以让弹框出现时...
通过以上知识点，我们可以构建一个简单的半透明遮罩层弹框效果。用户点击按钮后，页面中会展示一个半透明的遮罩层，并且遮罩层上包含一些提示性内容。这样的实现方式在用户界面设计中非常常见，既美观又能很好地与...