`

动态创建层提示代码

阅读更多

<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
function cdiv(){
//$("idt").innerHTML="<img src='logo.jpg'/>";
if($('div1')==undefined)
{
var createDiv = document.createElement("div");
// createDiv.setAttribute("class","aaa")
createDiv.style.border = "1px solid #ccc";
createDiv.setAttribute("id","div1");
createDiv.style.background = "#f60";
createDiv.setAttribute("position","absolute");
createDiv.style.height = 10;
createDiv.style.width = 100;
createDiv.style.top =$('tlink').offsetTop;
alert($('tlink').offsetLeft+"--"+$('tlink').width+"----"+200+"---"+$('tlink').offsetWidth);
///获取文本框后面的坐标
createDiv.style.left =$('tlink').offsetLeft+3+$('tlink').offsetWidth;
createDiv.style.position ="absolute";
//var createText = document.createTextNode("我是一个层");
createDiv.innerHTML="<a href='#'>55555</a>"
//var img = new Image();
//img.width =1;
//img.height=10;
//img.src="logo.jpg";
//createDiv.appendChild(img);
//createDiv.appendChild(createText);

var tlink = document.getElementById("tlink");
var parent = tlink.parentNode;
if(parent.lastChild == tlink) {
parent.appendChild(createDiv);
} else {
parent.insertBefore(createDiv, tlink.nextSibling);
}

}
}


window.onload = function(){
tlink.onclick=function()
{
cdiv();
}
}
</script>
</head>
<input type="text" id="tlink" width="60px">

分享到:
评论

相关推荐

    MopTip可关闭的提示层代码

    HTML用于创建提示层的基本结构,CSS用于样式设计,使其符合界面风格,而JavaScript(可能还包括jQuery或其他库)则用于实现动态效果和交互功能,如显示、隐藏、动画以及响应用户的关闭操作。 在"标题"和"描述"中...

    JS弹出层源代码

    在网页中,弹出层(通常称为弹窗或提示框)是用户界面设计中常见的元素,用于显示警告、确认信息、输入数据或其他交互功能。本文将深入探讨JS弹出层的实现原理及其应用。 弹出层的基本概念是创建一个在用户与网页...

    电商网站jQuery弹出提示层代码.zip

    这个"电商网站jQuery弹出提示层代码.zip"文件提供了一种实现这一目标的方法,它包含了一系列用于创建动态、交互式提示层的HTML5、jQuery、JavaScript和CSS代码。接下来,我们将深入探讨这些技术以及它们在构建电商...

    微信判断浏览器自动弹出遮罩层代码

    3. **动态控制遮罩层**:根据检测结果,我们可以决定何时显示或隐藏遮罩层。如果用户在微信浏览器中,可以使用JavaScript将遮罩层的`display`属性设置为`block`来显示它: ```javascript if (isWeChat()) { ...

    微信判断浏览器自动弹出遮罩层【完整代码】.zip

    这可能涉及到JavaScript的DOM操作,动态创建和展示一个包含提示信息的弹窗。此外,可能还会包含动画效果,如淡入淡出,增强用户体验。 5. **事件监听**:在用户完成操作(如点击弹窗的确认按钮)后,需要监听相应的...

    自己做的3层架构代码自动生成工具

    5. **数据库操作类**:这可能是一组与数据库交互的代码文件,工具可能使用这些类来连接数据库,创建表单,执行查询等,从而自动生成与数据库相关的代码。 综上所述,这个“3层架构代码自动生成工具”是面向Windows...

    JS遮罩层 提示层

    在本例中,我们需要动态创建一个新的HTML结构,展示省份和城市的选择列表,然后将其插入到页面的适当位置。 2. **事件监听**:为了响应用户的操作,如点击某个按钮触发遮罩层的弹出,我们需要添加事件监听器。常见...

    简洁的关闭层代码.rar

    本资源"简洁的关闭层代码.rar"似乎包含了一个用于实现表格图层效果的JS代码片段,这在网页设计中非常常见,特别是用于创建弹窗、模态框或者信息提示等效果。 首先,让我们来理解“关闭层”的概念。在网页设计中,...

    html5气泡提示框鼠标悬停气泡文字框提示代码

    通过学习这些代码,你可以更深入地理解如何在实际项目中创建具有动态效果的HTML5气泡提示框。 此外,现代前端框架如Vue.js、React或Angular也提供了更高级的方式来处理这种交互,比如使用指令(Vue的v-tooltip)、...

    js div层遮罩提示窗口效果

    1. 创建遮罩层:使用JavaScript动态创建一个div元素,并设置其宽高为浏览器窗口大小,背景颜色为半透明,然后将其添加到body元素中。 2. 创建提示窗口:同样使用JavaScript创建另一个div元素,用于显示具体的信息。...

    jQuery适用于手机端的弹出提示框代码.zip

    在JavaScript特效中,弹出提示框常常用于创建交互性更强的用户界面。例如,当用户提交表单时,提示框可以用来显示成功或错误信息,而不是仅仅改变状态文本。表单按钮的点击事件可以触发这些提示,增强用户体验。 在...

    js 创建div层

    - 动态创建的div层可能会改变页面的布局和性能,合理规划元素数量和位置,避免过度渲染导致的性能瓶颈。 - 使用事件监听器或回调函数,确保div层的创建与用户操作或数据变化相协调。 通过上述分析,我们可以看到,...

    遮罩层,动态的层显示

    在这个过程中,"关闭"标签提示我们可以添加一个关闭功能,让用户能够随时取消遮罩层,这通常是一个小的关闭按钮或者点击遮罩层本身来关闭。在JavaScript中,我们可以监听遮罩层上的点击事件,当用户点击时关闭遮罩层...

    遮罩层js代码

    在网页设计和开发中,遮罩层(Mask ...总之,"遮罩层js"提供了全面的解决方案来创建动态、个性化的遮罩层效果。通过深入研究其源码和示例,开发者不仅能掌握遮罩层的实现技巧,还能提升在网页交互设计上的专业能力。

    鼠标滑过图片出现大图片提示层效果js代码

    "鼠标滑过图片出现大图片提示层效果"是一种常见的交互设计手法,它使得用户在不离开当前页面的情况下预览图片的详细内容,尤其适用于产品展示或者图像丰富的网站。这种效果通常通过JavaScript实现,因为它能提供动态...

    jquery css3图片标注悬浮层提示效果代码

    本资源“jquery css3图片标注悬浮层提示效果代码”提供了一种使用jQuery和CSS3实现的方法,来创建动态、美观的图片标注和悬浮层效果。下面将详细介绍这个实现过程中的关键知识点。 首先,jQuery是一种广泛使用的...

    许愿墙源代码,aspx,动态,多层显示

    接着,“源代码”意味着我们将探讨的是用于创建这个功能的编程代码,而不是已经编译好的可执行程序。最后,“aspx”是ASP.NET技术的一种页面文件扩展名,表明这个许愿墙是用ASP.NET框架构建的,而“动态”和“多层...

    微信浏览器内显示遮罩层提示点击右上角

    本文将详细探讨如何实现“微信浏览器内显示遮罩层提示点击右上角,选择在浏览器中打开链接”的功能,以及相关技术要点。 首先,我们需要理解微信内置浏览器(X5内核)的工作原理。微信浏览器是基于腾讯自家的X5 ...

    JS弹出层大集合。很多好用的JS弹出层代码

    这些代码可能包含如何创建可自定义样式、支持多行文本、按钮响应的警告弹出层。 3. **信息确认(Confirmations)**:在用户执行删除或重要操作前,信息确认弹出层可以防止误操作。代码可能会演示如何在用户点击某个...

Global site tag (gtag.js) - Google Analytics