function Open(){
//隐藏select控件
DispalySelect(0);
//显示遮罩层
$("divPageMask").style.display="block";
//处理遮罩层
resizeMask();
window.onResize = resizeMask;
//显示弹出窗口
$("divOpenWin").style.display="block";
}
function Close(){
//显示select控件
DispalySelect(1);
//处理遮罩层
var m = $("divPageMask");
m.style.width = "0px";
m.style.height = "0px";
var o = $("divOpenWin");
o.style.display = "none";
window.onResize = null;
o.style.display="none";
}
//页面遮罩
function resizeMask(){
var m = $("divPageMask");
m.style.width = document.documentElement.clientWidth+'px';
m.style.height = resizeHeight()+'px';
var o = $("divOpenWin");
o.style.left = ((document.documentElement.clientWidth - 600) / 2)+'px';
o.style.top = ((document.documentElement.clientHeight - 400) / 2)+'px';
}
function DispalySelect(val){
//显示和隐藏select控件
var dispalyType;
var arrdispalyType=["hidden","visible"];
var arrObjSelect=document.getElementsByTagName("select");
for (i=0;i<arrObjSelect.length;i++){
arrObjSelect[i].style.visibility=arrdispalyType[val];
}
}
function resizeHeight(){
var ch = document.documentElement.clientHeight;
var oh = document.documentElement.scrollHeight;
if(ch>oh){ return ch;}else{ return oh}
}
此脚本只适用于如下的DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在IE和FireFox下均正常
HTML:
<div id="divPageMask"></div>
<div id="divOpenWin">
内容区域<a href="javascript:Close();">Close</a>
</div>
具体适用方式是：可以通过页面上的某个按钮和超链接触发脚本的Open方法，然后在内容区写上关闭的方法就行了。
上面代码来自网络，感谢贡献者，只是自己增加了resizeHeight方法，因为如果按作者原来的写法只能遮罩文档大小，如果文档内容小于屏幕高度，则不会遮罩下部分，resizeHeight通过比较当前是取文档高度还是屏幕高度。另外要注意的是在设置height和width时要加上px，否则firefox就不认了。
另外别忘记两个div的样式，具体怎么做，你自己修改就行了
#divPageMask{
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.5;
opacity:0.5;
left:0px;
position:absolute;
top:0px;
}
#divOpenWin{background-color:#FFFFFF;position: absolute;left:0px;top:0px;display: none;z-index:50; width:700px;height:auto}
分享到：
相关推荐
.custom-select.open .custom-option-list { display: block; } ``` 7. **无障碍性**：确保自定义选择框对于屏幕阅读器和其他辅助技术友好。可以使用`aria-*`属性来标记元素关系，如`aria-haspopup`和`aria-...
1. 找到与layer弹窗关联的CSS类，通常是包含select的最外层div。例如，可能会是`.layui-table-body`、`.layui-table-box`或`.layui-table-view`等类。 2. 修改这些类的`overflow`属性为`visible`。这将允许内容...
2. **隐藏select元素**：当弹出窗口显示时，可以使用JavaScript临时改变select元素的样式，将其设置为`visibility: hidden`，关闭窗口后再恢复。这种方法简单有效，但可能会影响用户的交互体验，因为他们不能在弹窗...
- 可以在div内部插入一个透明的iframe，通过设置其样式（如 `z-index:-1`，`position:absolute` 等），使其位于select元素之上，从而防止select下拉菜单挡住div内容。 8. iframe自适应高度（跨域问题）： - 当...
visibility:hidden"></div>'); ... document.body.onload = init; function init() { templayer.innerHTML = ""; while (templayer.offsetHeight ) { templayer.innerHTML += marquees.innerHTML; } marquees....
对于纯JavaScript实现，主要挑战在于处理`select`控件，因为它们无法被普通的`div`遮罩层覆盖。为了解决这个问题，我们可以选择在弹出窗口下方添加一个`iframe`来覆盖`select`，或者在弹出窗口出现时临时隐藏`select...
<div align="center" id="dsmo" style="overflow:hidden;height:200px;width:99%;border-width:0;border-style:dotteddotteddotteddotted;"> <div id="dsmo1"> <!----> ,lsqlView,lIDView set lrsView=server....
JS+DIV的实现方式是指使用JavaScript动态创建DOM元素（如`<div>`），并结合CSS实现下拉效果和多选样式。 在博文链接中（https://zhuyuehua.iteye.com/blog/770909），作者可能分享了具体的实现方法，包括如何使用...
rs3.Open "SELECT TOP 5 * FROM news WHERE lm='61' ORDER BY id DESC", db, 1, 1 if rs3.EOF and rs3.BOF then Response.Write "目前没有内容" else do while not rs3.EOF Response.Write ...
<div class="custom-select" :tabindex="tabindex" @blur="open=false"> <div class="selected" :class="{open:open}" @click="open=!open"> {{selected}} </div> <div class="items" :class="{selectHide:!open...
elem.css({ overflow: 'hidden' }); var scroller = elem.find('[data-iscroll="scroller"]').get(0); if (!scroller) { $(elem.get(0)).children().wrapAll("<div data-iscroll='scroller'></div>"); } var ...
"> <input type="hidden" name="Action" value="AddSave"> <tr><br> <td colspan="4" bgcolor="#eeeeee"><div align="center">字 段 信 息 添 加</strong></div></td><br> </tr><br> <tr><br> 选择类别...
上传文件" disabled="disabled" onClick="window.open('upFile.jsp','','width=350,height=150');"> 歌词文件： <td><input name="lrcFileURL" type="text" id="lrcFileURL" size="30" readonly="yes" title=...
<select name="select" onchange="window.open(this.options[this.selectedIndex].value)"> <option value="http://www.microsoft.com/ie">Internet Explorer <option value="http://www.microsoft.com">Microsoft...
无关闭按钮IE window.open("aa.htm", "meizz", "fullscreen=7"); 统一编码/解码 alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) encodeURIComponent对":"、"/"、";" 和 "?"也编码 ...
Form::select('color', ['red' => '红色', 'blue' => '蓝色'], 'red'); // 多选框 Form::checkboxes('fruits', ['apple' => '苹果', 'banana' => '香蕉'], ['apple']); ``` ### 8. 表单文件上传 处理文件上传时，...
string query = "SELECT * FROM News ORDER BY DateTime DESC"; // 创建并打开数据库连接，执行查询 using (SqlConnection connection = new SqlConnection(connectionString)) { SqlCommand command = new ...
overflow:hidden}#ftConw{width:720px;margin:0 auto}body{font:12px arial;text-align:;background:#fff}body,p,form,ul,li{margin:0;padding:0;list-style:none}body,form,#fm{position:relative}td{text-align:...
6. 同一行布局：在CSS中，将`div`层和文本框置于同一行通常需要使用`display: inline-block`或`float`属性。选项d看起来像是正确的，但没有提供完整的CSS代码，所以无法确定。 7. 动态添加下拉列表选项：`options`...