有提示确定与取消功能的弹出式窗的代码_javascript技巧-js教程-PHP中文网

有提示确定与取消功能的弹出式窗的代码_javascript技巧

php中文网

发布： 2016-05-16 19:15:01

原创

1158人浏览过

我不知道这样的功能叫什么，找了好久也没有找到，所以来找大家帮助了，在此谢谢了。

我的目的是这样的，就是在原有页面基础上，弹出一个新窗，同时原来的页面偏灰色，并且不能操作，必须在弹出的新窗关闭后才能恢复原来窗口的操作。具体效果有点象lightbox和thickbox，我现在是想用thickbox，它可以实现这种旧页面变灰的效果，但是没有办法实现旧页面不能操作的问题。（要在firefox和ie下都能使用，ie的showModalDialog是可以实现这样的目的，但是firefox下不能用啊）

AssemblyAI

转录和理解语音的AI模型

查看详情

<input type="button" value="关闭？" onclick="back.style.background='#333333';back.style.filter='alpha(opacity=40)';back.style.visibility='';wnd.style.display='inline';"><script> 
var isDrag = false;

function execCode(){

var newWin = window.open(); 
newWin.document.write(tt.value);

}

var oldX=0,oldY=0;

function init(){ 
    isDrag=true; 
    oldX=event.x; 
    oldY=event.y; 
}

function end(){ 
    isDrag=false; 
}

function moveIt(){ 
    if(isDrag){ 
    var x =window.event.x; 
    var y = window.event.y; 
     
    hdl.parentNode.style.left = parseInt(hdl.parentNode.style.left.replace("px","")) + (x - oldX); 
    hdl.parentNode.style.top = parseInt(hdl.parentNode.style.top.replace("px","")) + (y - oldY); 
     
    oldX = x; 
    oldY = y; 
    } 
}

</script><div id="back" onclick="cancels.click();" onmousemove="moveIt();" onmouseup="end();" style="position:absolute;left:0;top:0;width:1000;height:660;visibility:hidden;"> </div> 
<div id="wnd" onmousedown="init();" onmousemove="moveIt();" onmouseup="end();" style="border:1px outset #333333;position:absolute;filter:alpha(opacity=70);top:100;left:200;width:200;height:120;display:none;"> 
<div id="hdl" style="background:#333377;width:100%;height:20;color:white"><b>窗口</b></div> 
<div style="background:#dddddd;width:100%;height:100">  
<input type="button" value="确定" onclick="opener=null;window.close()"><input type="button" value="取消" id="cancels" onclick="back.style.visibility='hidden';wnd.style.display='none';">
</div> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

自动滚动至容器底部：利用 MutationObserver 管理动态内容滚动 TypeScript 鉴别联合类型：优雅处理条件类型与可选属性 JavaScript中的短路求值与应用技巧_javascript技巧在自包含服务器环境中执行用户提供JavaScript代码的安全性考量解决React中按钮点击不显示弹出表单的问题：状态管理与语法修正