Open Div,Hidden Select ,Flash

本文介绍了一个用于网页的遮罩层和弹出窗口的JavaScript脚本实现方法,包括自适应屏幕尺寸的功能。该脚本适用于IE和Firefox浏览器,并提供了一种简单的方式通过页面元素触发弹窗显示和关闭。

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

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}

<div class="container" id="content"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-5 col-lg-6 hidden-xs hidden-sm"> <h1 class="txt-color-red login-header-big">VisionTool MES 生产制造系统</h1> <div class="hero"> <img class="pull-right display-image" style="width: 380px;" alt="" src="/staticResource/vendor/img/demo/loading.jpg"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4"> <div class="well no-padding"> <form class="smart-form client-form" id="login-form" action="index.html"> <header>系统登录认证</header> <fieldset> <section> <label class="label username">用户名</label> <label class="input"> <i class="icon-append fa fa-user"></i> <input name="username" id="username" type="username" placeholder="用户名"> <b class="tooltip tooltip-top-right"><i class="fa fa-user txt-color-teal"></i>请输入用户名</b></label> </section> <section> <label class="label">密码</label> <label class="input"> <i class="icon-append fa fa-lock"></i> <input name="password" id="password" type="password" placeholder="密码"> <b class="tooltip tooltip-top-right"><i class="fa fa-lock txt-color-teal"></i> 请输入密码</b> </label> </section> <section> <label class="label">班次</label> <div class="dropdown bootstrap-select bs3"><select name="shiftClass" tabindex="-98" class="selectpicker" id="shiftClass"></select><button title="Nothing selected" class="btn dropdown-toggle btn-default bs-placeholder" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="bs-select-1" type="button" data-toggle="dropdown" data-id="shiftClass"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div> </div><span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><div tabindex="-1" class="inner open" id="bs-select-1" role="listbox"><ul class="dropdown-menu inner " role="presentation"></ul></div></div></div> </section> <div class="note"> <a onclick="alert('请联系信息管理部:') ">忘记密码了?</a> </div> </fieldset> <footer> <button class="btn btn-primary" id="btnlogin" type="button">登录</button> </footer> </form> </div> </div> </div> </div> 这里面是否包含CSRF令牌信息
06-25
// @ts-nocheck class SweetalertSystem { constructor() { this.fieldRegistry = {}; this.modalRegistry = {}; this.nestedModalStack = []; this.buttonHandlers = new Map(); this.addEntityButtons = null; this.initCoreComponents(); } // ===== 核心字段类型注册 ===== initCoreComponents() { this.registerFieldType('text', { render: (config) => this.renderTextField(config) }); this.registerFieldType('select', { render: (config) => this.renderSelectField(config), afterRender: (element, config) => this.handleSelectAfterRender(element, config) }); this.registerFieldType('number', { render: (config) => this.renderNumberField(config) }); this.registerFieldType('checkbox', { render: (config) => this.renderCheckboxField(config) }); } registerFieldType(type, definition) { if (!definition.render || typeof definition.render !== 'function') { throw new Error(`Field type '${type}' must have a render function`); } this.fieldRegistry[type] = definition; } // ===== 字段渲染方法 ===== renderTextField(config) { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="text" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} placeholder="${config.placeholder || ''}"> </div>`; } renderSelectField(config) { const options = (config.options || []) .map(opt => `<option value="${opt.value}" ${config.value == opt.value ? 'selected' : ''}>${opt.label}</option>`) .join(''); return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <div class="input-group"> <select class="form-select ${config.select2 ? 'select2-field' : ''}" name="${config.name}" ${config.required ? 'required' : ''} placeholder="${config.placeholder || '请选择'}"> <option value=""></option> ${options} </select> ${config.addButton ? ` <button class="btn btn-outline-secondary add-entity-btn" type="button" data-target-field="${config.name}" data-entity-type="${config.addButton.entityType}"> <i class="fa fa-plus"></i> ${config.addButton.label} </button> ` : ''} </div> </div>`; } renderNumberField(config) { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="number" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} step="${config.step || 1}" min="${config.min || 0}"> </div>`; } renderCheckboxField(config) { return `<div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" name="${config.name}" id="${config.name}" ${config.value ? 'checked' : ''}> <label class="form-check-label" for="${config.name}">${config.label}</label> </div>`; } // ===== Select2 处理 ===== handleSelectAfterRender(element, config) { if (config.select2) { const $ select = $(element).find('select'); this.safeInitSelect2($ select, { theme: 'bootstrap', placeholder: config.placeholder || '请选择', allowClear: true, dropdownParent: Swal.getContainer() || document.body }); } } // ===== 表单处理 ===== async openForm(config) { const { title, fields, onSubmit, onAddEntity } = config; const formHTML = fields.map(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; return fieldType ? fieldType.render(fieldConfig) : `<div class="error">Field type '${fieldConfig.type}' not supported</div>`; }).join(''); return new Promise((resolve) => { Swal.fire({ title, html: `<form>${formHTML}</form>`, focusConfirm: false, showCancelButton: true, confirmButtonText: config.confirmButtonText || '保存', cancelButtonText: config.cancelButtonText || '取消', preConfirm: () => this.collectFormData(), didOpen: () => { // 处理字段后渲染逻辑 fields.forEach(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; if (fieldType && fieldType.afterRender) { const element = Swal.getPopup().querySelector(`[name="${fieldConfig.name}"]`); if (element) { fieldType.afterRender(element, fieldConfig); } } }); // 设置按钮处理器 this.setupMultiButtonHandlers(config, onAddEntity); }, willClose: () => { this.cleanupMultiButtonHandlers(); this.destroyAllSelect2(); } }).then((result) => { if (result.isConfirmed && onSubmit) { onSubmit(result.value); } resolve(result.isConfirmed); }); }); } collectFormData() { const data = {}; const popup = Swal.getPopup(); const form = popup?.querySelector('form'); if (form) { const formData = new FormData(form); for (const [name, value] of formData.entries()) { // 处理多值字段 if (data[name]) { data[name] = Array.isArray(data[name]) ? [...data[name], value] : [data[name], value]; } else { data[name] = value; } } } return data; } // ===== 按钮事件处理 ===== setupMultiButtonHandlers(config, onAddEntity) { const popup = Swal.getPopup(); if (!popup) return; this.cleanupMultiButtonHandlers(); this.addEntityButtons = Array.from(popup.querySelectorAll('.add-entity-btn')); this.addEntityButtons.forEach(btn => { const handler = async () => { const targetField = btn.dataset.targetField; const entityType = btn.dataset.entityType; if (onAddEntity) { const newItem = await onAddEntity(entityType, targetField); if (newItem) { this.updateSelectField(popup, targetField, newItem); } } }; btn.addEventListener('click', handler); this.buttonHandlers.set(btn, handler); }); } cleanupMultiButtonHandlers() { if (this.addEntityButtons) { this.addEntityButtons.forEach(btn => { const handler = this.buttonHandlers.get(btn); if (handler) { btn.removeEventListener('click', handler); this.buttonHandlers.delete(btn); } }); this.addEntityButtons = null; } } updateSelectField(popup, fieldName, newItem) { if (!popup || !popup.isConnected) return; const select = popup.querySelector(`select[name="${fieldName}"]`); if (select) { const option = new Option(newItem.label, newItem.value, true, true); select.add(option); if ($(select).hasClass('select2-initialized')) { $(select).trigger('change'); } } } // ===== 模态框系统 ===== registerModalType(name, config) { this.modalRegistry[name] = { ...config, afterRender: (config, container) => { config.fields.forEach(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; if (fieldType && fieldType.afterRender) { const fieldElement = container.find(`[name="${fieldConfig.name}"]`).closest('.mb-3'); if (fieldElement.length && this.isElementInDOM(fieldElement[0])) { try { fieldType.afterRender(fieldElement[0], fieldConfig); } catch (error) { console.error(`AfterRender error for field ${fieldConfig.name}:`, error); } } } }); } }; } registerEntityForm(entityType, fields) { // 确保 fields 是数组 if (!Array.isArray(fields)) { console.error(`Fields must be an array for entity type: ${entityType}`); return; } this.registerModalType(entityType, { template: `<div class="modal fade" id="${entityType}Modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="${entityType}Title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body" id="${entityType}Body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="${entityType}Submit">保存</button> </div> </div> </div> </div>`, render: (config, container) => { container.find(`#${entityType}Title`).text(config.title); let formHTML = ''; // 使用注册时传入的 fields,而不是 config.fields fields.forEach(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; if (fieldType) { formHTML += fieldType.render(fieldConfig); } }); container.find(`#${entityType}Body`).html(formHTML); }, getFormData: (container) => { const formData = {}; container.find('input, select, textarea').each(function() { const $ el = $(this); const name = $ el.attr('name'); if (!name) return; if ($ el.attr('type') === 'checkbox') { formData[name] = $ el.is(':checked'); } else { formData[name] = $ el.val(); } }); return formData; }, bindEvents: (config, container, onSubmit) => { container.find(`#${entityType}Submit`).off('click').on('click', () => { const formData = this.getFormData(container); onSubmit(formData); }); } }); } open(modalType, config, callbacks = {}) { if (!this.modalRegistry[modalType]) { console.error(`Unregistered modal type: ${modalType}`); return null; } const modalConfig = this.modalRegistry[modalType]; const modalId = `${modalType}Modal`; let $ modal = $(`#${modalId}`); // 创建模态框如果不存在 if ($ modal.length === 0) { $ modal = $(modalConfig.template); $('body').append($ modal); } // 重新初始化模态框 if ($ modal.data('bs.modal')) { $ modal.data('bs.modal').dispose(); } // 渲染内容 modalConfig.render(config, $ modal); // 绑定事件 if (modalConfig.bindEvents) { modalConfig.bindEvents(config, $ modal, callbacks.onSubmit || (() => {})); } // 创建Bootstrap模态实例 const modalInstance = new bootstrap.Modal($ modal[0]); modalInstance.show(); // 执行后渲染逻辑 if (modalConfig.afterRender) { modalConfig.afterRender(config, $ modal); } // 添加到模态栈 const modalObj = { hide: () => modalInstance.hide(), show: () => modalInstance.show(), getElement: () => $ modal[0], config }; this.nestedModalStack.push(modalObj); return modalObj; } closeCurrentModal() { if (this.nestedModalStack.length > 0) { const currentModal = this.nestedModalStack.pop(); currentModal.hide(); // 显示上一个模态框 if (this.nestedModalStack.length > 0) { const prevModal = this.nestedModalStack[this.nestedModalStack.length - 1]; prevModal.show(); } } } // 添加辅助方法检查元素是否在 DOM 中 isElementInDOM(element) { return document.body.contains(element); } // 增强的安全 Select2 销毁方法 safeDestroySelect2($ select) { try { // 检查元素是否仍在 DOM 中 if (!$ select || $ select.length === 0 || !this.isElementInDOM($ select[0])) { return false; } // 检查 Select2 是否已初始化 if ($ select.data('select2')) { // 尝试使用官方销毁方法 $ select.select2('destroy'); // 手动清理残留数据 $ select.removeData('select2'); $ select.removeClass('select2-hidden-accessible'); $ select.next('.select2-container').remove(); } $ select.removeClass('select2-initialized'); return true; } catch (error) { console.error('Select2 destruction failed:', error); // 尝试回退清理 try { $ select.removeData('select2'); $ select.removeClass('select2-hidden-accessible'); $ select.next('.select2-container').remove(); } catch (fallbackError) { console.error('Fallback cleanup failed:', fallbackError); } return false; } } // 增强的安全 Select2 初始化方法 safeInitSelect2($ select, options) { try { // 检查元素是否在 DOM 中 if (!$ select || $ select.length === 0 || !this.isElementInDOM($ select[0])) { return false; } // 先尝试销毁已有的实例 this.safeDestroySelect2($ select); // 确保 Select2 可用 if (typeof $.fn.select2 !== 'function') { console.warn('Select2 not available, skipping initialization'); return false; } // 应用安全配置 const safeOptions = { ...options, dropdownParent: options.dropdownParent || document.body }; // 初始化 Select2 $ select.select2(safeOptions); $ select.addClass('select2-initialized'); return true; } catch (error) { console.error('Select2 initialization failed:', error); // 尝试回退到简单选择框 try { $ select.addClass('form-control'); $ select.removeClass('select2-field'); } catch (fallbackError) { console.error('Fallback styling failed:', fallbackError); } return false; } } // ... 其他代码 ... // 在弹窗关闭时清理所有 Select2 实例 destroyAllSelect2() { const popup = Swal.getPopup(); if (popup) { $(popup).find('.select2-initialized').each((index, element) => { this.safeDestroySelect2($(element)); }); } } }完整优化
07-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值