`

css 弹出浮动框 并可以关闭

阅读更多

<copy from  .... I forget it>

<html>
<head>
<style>
   li{list-style:none; margin-left:0px;padding-left:0px;}
   ul{padding:0px;}
</style>
<script>
function sAlert(txt)
{
//var eSrc=(document.all)?window.event.srcElement:arguments[1];
var shield = document.createElement("DIV");
var obj = document.getElementById("ehllo");
var datas = new Array('red','white','green','gray');
shield.id = "shield";
shield.style.border = "1px solid #CCCCCC";
shield.style.position = "absolute";
shield.style.left = obj.offsetLeft;
shield.style.top = obj.offsetTop + obj.offsetHeight;
shield.style.width = obj.offsetWidth - 4;
//window.alert(document.body.scrollHeight);
//shield.style.height = document.body.scrollHeight+"px";
shield.style.height = "100";
shield.style.background = "white";
shield.style.textAlign = "left";
shield.style.zIndex = "10000";
shield.style.filter = "alpha(opacity=80)";
shield.style.opacity = 0.8;
//shield.style.border-width=thick;

strHtml = "<a href='javascript:return false;' style='text-decoration: none;color:black; float:right;' onclick='doOk();'>×</a>\n";
shield.innerHTML = strHtml;
ul.style.padding="0px;";
for(key in datas){
  var li = document.createElement('li');
  //li.style.list-style = "none";
  li.innerHTML = "<div>" + datas[key] + "</div>";
  ul.appendChild(li);
}
shield.appendChild(ul);
var dialog = document.getElementById("shield");
if(null == dialog) {
 document.getElementById("ehllo").parentNode.appendChild(shield);
}else {
  document.getElementById("ehllo").parentNode.removeChild(shield);
  document.getElementById("ehllo").parentNode.appendChild(shield);
}

this.doOk = function doOk(){
document.getElementById("ehllo").parentNode.removeChild(shield);

}
document.getElementById("do_OK").focus();
}
</script>
</head>
<body >
<div style="margin-left:200px;">
<span style="width:200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<input id="ehllo" type=text onclick="sAlert('登陆成功!')" value=登陆> </input>
<div>
</body>
</html>

分享到:
评论
1 楼 yelang2009 2010-08-30  
不而要设置高度

相关推荐

    弹出登录框的JQuery弹出浮动层

    "弹出登录框的JQuery弹出浮动层"就是一种常见的交互设计手法,它允许用户在不离开当前页面的情况下进行登录操作,提高了用户体验。JQuery,一个强大的JavaScript库,使得实现这样的功能变得更加简单。接下来,我们将...

    jQuery弹出层 可移动层 提示框 浮动层

    在标题提及的案例中,"jQuery弹出层 可移动层 提示框 浮动层",意味着我们需要创建一个不仅可以显示信息,还可以通过用户手势移动的浮动窗口。为了实现这一功能,我们需要结合jQuery的选择器、事件处理和动画方法。...

    用于弹出登录框的JQuery弹出浮动层

    "用于弹出登录框的JQuery弹出浮动层"是一个常见的技术需求,尤其对于那些希望在不跳转页面的情况下提供登录功能的网站。JQuery,一个强大的JavaScript库,提供了丰富的功能来实现这样的效果。 首先,我们要理解...

    js浮动弹出框特效jquery

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了JavaScript代码的编写,...通过理解并熟练运用jQuery的核心方法,开发者可以轻松地构建出具有专业品质的浮动弹出框特效,提升网页的用户体验。

    弹出浮动层漂亮登录框 Jquery

    "弹出浮动层漂亮登录框 Jquery" 是一种常见的实现方式,它结合了JavaScript库Jquery的优势,为用户提供了一种优雅、直观且易于使用的登录界面。这种设计可以提高网站的可用性,同时保持页面的整洁和美观。 Jquery ...

    div+css 弹出层

    通过以上步骤,我们可以创建一个兼容多浏览器的div+css弹出层。不过,实际开发中,可能会遇到更复杂的需求,如动画效果、异步加载内容等,这就需要更深入的前端技术知识和实践经验。在不断学习和实践中,我们可以更...

    弹出浮动层

    描述中提到的链接指向了iteye博客上的一篇文章,虽然具体内容没有给出,但可以推测该文章可能详细介绍了如何使用某种技术或方法来创建弹出浮动层,可能包括代码示例、步骤解析以及可能遇到的问题和解决方案。...

    点击弹出浮动层 弹出遮罩层

    在网页设计和开发中,...总之,“点击弹出浮动层 弹出遮罩层”是网页设计中一个重要的交互元素,通过巧妙的CSS和JavaScript技术可以实现良好的用户体验。开发者应注重细节,确保其在各种场景下都能高效、友好地工作。

    弹出浮动层漂亮登录框

    在网页设计中,用户交互是至关重要的,而“弹出浮动层漂亮登录框”就是一种增强用户体验的方法。这种设计使得用户在不离开当前页面的情况下,能够方便地进行登录操作,提高了网站的可用性和互动性。本文将深入探讨...

    漂亮的浮动框

    HTML用于构建基础结构,CSS用于美化样式,JavaScript则用于添加动态效果和交互功能,如点击按钮后弹出浮动框,以及提供关闭功能。 一个基本的浮动框实现可能包含以下步骤: 1. **HTML 结构**:首先,创建一个HTML...

    JS+CSS3制作弹出浮动提示框ui特效代码.zip

    "JS+CSS3制作弹出浮动提示框ui特效代码"是一个典型的前端技术应用,结合JavaScript(JS)和CSS3来创建交互式的提示框效果。这个压缩包包含了一个实现这种特效的代码示例,以及一份可能的使用指南。 JavaScript是一...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    4. **弹出和关闭逻辑**:在点击事件处理函数中,可以使用`.show()`方法显示弹出层,`.hide()`方法关闭弹出层。同时,可以设置过渡效果,如淡入淡出,增加用户体验。 5. **滚动同步**:为了实现弹出层随屏幕滚动,...

    JS右下角弹出浮动提示框特效.zip

    总的来说,"JS右下角弹出浮动提示框特效.zip" 提供了一个学习和实践JavaScript、jQuery、CSS特效的好机会。无论是初学者还是经验丰富的开发者,都能从中受益,掌握如何在网页上创建动态、吸引人的用户界面元素。通过...

    Jquery 弹出框

    - 弹出框:通常是指在网页主内容之上显示的浮动窗口,用于展示信息或获取用户输入,它可以阻止用户与背景页面的交互,直到弹出框被关闭。 - jQuery:一个轻量级、高性能的JavaScript库,简化DOM操作、事件处理、...

    JS弹出基于Table的可关闭浮动层.rar

    这个功能常见于网页中的警告提示、信息窗口或者模态对话框,它可以在用户操作后弹出,并允许用户通过点击关闭按钮来消除显示。 首先,我们要理解浮动层(Floating Layer)的概念。浮动层通常是指在网页上不依赖页面...

    js图片轮换+弹出浮动层

    在网页设计中,图片轮换和弹出浮动层是两种常用的技术,用于增强用户体验和交互性。本项目“js图片轮换+弹出浮动层”结合了这两种功能,旨在实现动态展示多张图片以及创建可交互的弹出窗口。下面我们将深入探讨这两...

    jQuery顶部浮动弹出层动画弹出层特效

    为了使弹出层始终在页面顶部浮动,可以设置CSS样式使其固定在顶部: ```css #myPopout { position: fixed; top: 0; /* 设置距离顶部的距离 */ width: 100%; /* 可根据需要调整宽度 */ z-index: 999; /* 确保弹...

    model弹出框

    通过CSS,开发者可以精确控制Model弹出框在页面中的显示效果,使其符合整体设计风格。 `data`文件夹可能包含了一些JSON格式的数据,用于填充Model弹出框的内容,比如动态生成的列表、表单数据或其他信息。这些数据...

    jquery div 弹出框

    3. 多种类型的弹出框:可以创建多种不同样式的弹出框,如警告框、信息框、确认框等,通过不同的CSS样式和按钮行为进行区分。 4. 阻止页面滚动:在弹出框显示时,可以禁用页面滚动,确保用户专注于当前的弹出框。 四...

Global site tag (gtag.js) - Google Analytics