`
linleizi
  • 浏览: 231634 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

显示不下弹出DIV辅助显示

 
阅读更多
// js方法
function txtMouseOver(obj) {
 try {
		var txtRange = obj.createTextRange();
		var strValue = obj.value;
		obj.value = "";
		var txtWidth = obj.scrollWidth;
		obj.value = strValue;
		var fontWidth = txtRange.boundingWidth;
		if (fontWidth <= txtWidth) {
			return;
		}
		var strHTML = "";
	    strHTML += "<table border=0>";
	    strHTML += "<tr>";
	    strHTML += "  <td  class = 'msg'><div align='center'>" + strValue + "</div></td>";
	  	strHTML += "</tr>";
		strHTML += "</table>";
		
		oRect = obj.getBoundingClientRect(); 
		
		document.all["msgBox"].innerHTML = strHTML;
		if (document.body.clientWidth < parseInt(oRect.left) + parseInt(txtWidth) + 2 + parseInt(fontWidth)) {
			document.all["msgBox"].style.posLeft = document.body.scrollLeft + oRect.left - 17 - fontWidth;
		} else {
			document.all["msgBox"].style.posLeft = document.body.scrollLeft + oRect.left + txtWidth + 2;
		}
		document.all["msgBox"].style.posTop = document.body.scrollTop + oRect.top - 5;
		document.all["msgBox"].style.filter="alpha(opacity=100)";
	} catch(E) {
	}
}

function txtMouseOut(obj) {
	try {
		document.all["msgBox"].innerHTML = "";
	} catch(E) {
	}
}

// html页面
<input style="width:290px" onMouseOver="txtMouseOver(this)" onMouseOut="txtMouseOut(this)" type="text" class="" readonly value="<%=test%>">
<div id="msgBox" style="position: absolute; left: 0px; top: 0px;"></div>
分享到:
评论

相关推荐

    漂亮的div弹出窗口样式

    8. **可访问性(accessibility)**:在设计弹出窗口时,也要考虑辅助技术的使用者,如添加合适的焦点管理、键盘导航支持和ARIA属性,确保所有用户都能方便地与弹出窗口交互。 9. **用户体验(User Experience, UX)**:...

    弹出div框架

    标题中的“弹出div框架”指的是在网页设计中利用HTML、CSS和JavaScript技术实现的一种交互效果,即通过点击按钮或链接等方式,使一个div元素(通常包含内容或信息)从页面背景中弹出,形成一个浮动窗口或者对话框。...

    网页上div拖拽,弹出div背景变暗

    当弹出div时,这个黑色层会覆盖整个页面,创造出背景变暗的效果。 2. **JavaScript / jQuery**:负责处理用户的交互事件,例如鼠标拖动。在JavaScript中,我们可以监听`mousedown`、`mousemove`和`mouseup`事件来...

    悬浮DIV弹出窗体实现登录

    在网页设计中,"悬浮DIV弹出窗体实现登录"是一种常见的交互设计手法,它能够为用户提供更加便捷和美观的登录体验。这种设计通常将登录表单以浮动窗口的形式展示,用户无需离开当前页面就可以完成登录操作,提升了...

    div_css_js弹出层有遮罩

    在网页设计中,"div_css_js弹出层有遮罩"是一个常见的交互设计技术,用于创建弹出式窗口或对话框,通常用于显示通知、表单、广告等。这一技术结合了HTML的`&lt;div&gt;`元素、CSS样式以及JavaScript/jQuery的动态效果,以...

    html 锁定页面(js遮罩层弹出div效果)

    4. 考虑键盘导航和无障碍性,确保屏幕阅读器和其他辅助技术可以正确地处理遮罩层和弹出div。 5. 优化性能,避免在页面加载时立即显示遮罩层,而是根据需求动态创建和显示。 总之,HTML页面锁定通过JavaScript和遮罩...

    jquery弹出层 jquery弹出层 jquery弹出层

    标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果,这在网页设计中是非常常见的一种功能,用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先,让我们理解什么是弹出层。弹...

    Jquery点击输入框弹出层

    本教程将详细讲解如何利用jQuery实现一个功能:当用户点击输入框时,弹出一个层(通常是遮罩或对话框)以辅助用户填入信息。 首先,我们需要理解“弹出层”或“对话框”的概念。在网页中,弹出层通常是一个浮动的...

    js 实现弹出层

    一个弹出层通常包含以下几个部分:背景遮罩层、内容容器、关闭按钮(可选)以及可能的其他辅助元素。以下是一个简单的HTML结构示例: ```html &lt;div id="overlay" class="overlay"&gt;&lt;/div&gt; &lt;div id="popup" class=...

    弹出层选项卡

    在网页设计中,"弹出层选项卡"是一种常见的交互元素,它允许用户在一个不离开当前页面的情况下查看或操作不同的内容区域。这种设计方法既节省了屏幕空间,又提供了良好的用户体验,因为它避免了频繁地跳转页面。接...

    弹出图片代码

    为了实现弹出效果,我们需要设置弹出层的初始状态为不可见(`display: none;`),然后添加过渡效果来增加视觉平滑性。同时,我们还要处理背景暗化效果,这可以通过给body添加一个半透明的黑色覆盖层来实现。 CSS...

    弹出可移动的div层

    标题中的“弹出可移动的div层”是指在网页开发中实现一个可移动的浮动对话框或提示框的技术。这种技术通常用于创建模态窗口、弹出菜单或自定义警告,让用户与页面上的特定内容进行交互。在网页设计中,div(division...

    Jquery简单的弹出层带遮罩插件

    本插件是关于“Jquery简单的弹出层带遮罩”的实现,它能够为网页提供一种优雅的方式来显示弹出窗口或对话框,并且在弹出窗口周围添加一个半透明的遮罩层,增强用户体验。 1. **jQuery基础** jQuery的核心在于它的...

    js漂亮弹出层 对话框

    3. **响应式布局**:确保弹出层在不同屏幕尺寸下都能正确显示。使用媒体查询和流式布局技术,让弹出层适应移动设备和平板电脑。 4. **功能完善**:包括按钮操作(如确认、取消)、关闭图标、拖拽功能、自定义内容等...

    手机html5弹出框

    HTML5本身并不直接提供弹出框元素,但我们可以利用现有的元素如`&lt;dialog&gt;`、`&lt;div&gt;`和JavaScript来创建自定义弹出框。`&lt;dialog&gt;`元素是HTML5的一个新特性,用于表示一个对话框,它可以是模态或非模态的。不过,目前...

    js特效实现(弹出层)

    // 可以添加键盘事件监听,比如按下ESC键关闭弹出层 document.addEventListener('keydown', function(event) { if (event.keyCode === 27) { // ESC键的keyCode是27 document.getElementById('mask').style....

    js页面动态加载弹出窗口

    弹出窗口是一种用户界面设计,它在用户交互后显示一个新的独立窗口,可以用来显示额外信息、确认操作、提示用户输入等。弹出窗口通常由JavaScript实现,分为以下几种类型: - **模态对话框(Modal Dialog)**:用户...

    jQuery鼠标上下拖动div排序代码

    4. **按钮操作**:描述中提到的按钮操作,可能是为了实现额外的功能,比如弹出提示框。我们可以为按钮绑定`click`事件来实现这一需求。 ```javascript $('#actionBtn').on('click', function() { alert('按钮被...

    精美网页弹出层大全

    网页弹出层是网页设计中常见的一种交互元素,主要用于显示重要的信息、提示、表单或者进行用户操作确认。在“精美网页弹出层大全”这个压缩包中,包含了一系列精心设计的弹出层实例,这些实例既采用了HTML的div元素...

    html中网页弹出提示的效果

    对于无障碍性,使用ARIA(Accessible Rich Internet Applications)角色和属性可以确保弹出提示对辅助技术友好。例如,`role="alert"`可以用于立即引起用户注意的警告信息。 总结,HTML中的弹出提示效果可以通过...

Global site tag (gtag.js) - Google Analytics