html 浮动窗口

本文详细探讨了HTML中实现浮动窗口的技术,包括如何使用CSS定位、JavaScript交互以及常见问题的解决策略,帮助开发者创建出响应式的浮动窗口效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

		<input type="text" size="84" id="receiver"/>
		<input type="button" value="批量输入" onclick="createInputDialog(this,'1','')" name="riskbehavior"/>	


function createInputDialog(obj,id,value)
{  
    var div=document.getElementById("editBehaviorDiv");  
    if(div!=null)  
        document.body.removeChild(div);  
    div = document.createElement("div");   
    div.id="editBehaviorDiv";  
    div.style.position='absolute';  
    var op=getoffset(obj); 
    div.style.top= "100px";  
    div.style.left= (document.body.clientWidth - 374)/2.0 + "px";  
    div.style.zIndex =100;  
    div.style.backgroundColor='#ecf1f6';  
    div.style.border="1px solid #666";  
    //div.className="td1";  
    div.innerHTML="<textarea name='behaviorValue' id='behaviorValue' cols='50' rows='8'>"+value+  
    "</textarea><br/><input type='button' value='修改' onclick=\"saveBehaviorname(this.parentNode,'"+id+"')\" />"+  
    "<input type='button' value='取消' id='cancelButton' onclick='document.body.removeChild(this.parentNode);'/>";  
    document.body.appendChild(div);  
    document.all.behaviorValue.focus();  
}   

function saveBehaviorname(obj,id)
{
    var behaviorValue = document.all.behaviorValue.value;
    var idsArray = new Array(); //定义一数组 
    idsArray = behaviorValue.split("\n"); //字符分割
    var idsString = "";
    for (i = 0; i < idsArray.length; i++) 
    { 
    	var temp = idsArray[i].Trim();
    	if(temp != null && temp != "")
    	{
    		idsString = idsString + idsArray[i].Trim() + ";"
    	}
    } 
    var str = "";
    for (i = 0; i < idsArray.length; i++) 
    { 
    	str = str + idsArray[i].Trim();
    } 
    document.getElementById('receiver').value = idsString;
    document.body.removeChild(obj);
}  

function getoffset(e)   
{   
	var t=e.offsetTop;   
	var l=e.offsetLeft;   
	while(e=e.offsetParent)   
	{   
   		t+=e.offsetTop;   
   		l+=e.offsetLeft;   
	}   
	var rec = new Array(1);   
	rec[0] = t;   
	rec[1] = l;   
	return rec   
} 

效果如图:


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值