• js实现弹框效果方法总结
  • 发布于 1周前
  • 57 热度
    0 评论
  • 汤彬
  • 3 粉丝 3 篇博客
  •   

我们在进行系统开发时经常需要用到弹框的效果,今天我这边就总结一下我们使用js实现弹框的常见方式,比如使用showModalDialog实现强制弹框,具体代码如下:

1.使用window.open实现弹框功能

function popupWindowWithParam(linkURL, id, width, height, top, scroll) {
    var iWidth = width; //窗口宽度 
    var iHeight = height; //窗口高度 
    var iTop = top;
    var iLeft = (window.screen.width - iWidth) / 2;
    window.open(linkURL+"?RequestID=" + id, "newwindow", "height=" + iHeight + ", width=" + iWidth + ", top=" + iTop + ", left=" + iLeft + ", toolbar=no, menubar=no, scrollbars="+scroll+", resizable=no,location=no, status=no")
}
function popupWindow(linkURL, width, height, top, scroll) {
    var iWidth = width; //窗口宽度 
    var iHeight = height; //窗口高度 
    var iTop = top;
    var iLeft = (window.screen.width - iWidth) / 2;
    window.open(linkURL, "_blank", "height=" + iHeight + ", width=" + iWidth + ", top=" + iTop + ", left=" + iLeft + ", toolbar=no, menubar=no, scrollbars="+scroll+", resizable=no,location=no, status=no")
}
2.使用 window.showModalDialog实现弹框功能
//url不带参数功能
function showDialog(linkURL, width, height, top, scroll) {
    var iWidth = width; //窗口宽度 
    var iHeight = height; //窗口高度 
    var iTop = top;
    var iLeft = (window.screen.width - iWidth) / 2;
     window.showModalDialog(linkURL, "_blank", "dialogHeight=" + iHeight + "px; dialogWidth=" + iWidth + "px; dialogTop=" + iTop + "px;dialogLeft=" + iLeft + "px; toolbar=no; menubar=no; scrollbars=" + scroll + "; resizable=no;location=no; status=no");
}
//url带参数的功能
function showDialogWithParam(linkURL, id, width, height, top, scroll) {
    var iWidth = width; //窗口宽度 
    var iHeight = height; //窗口高度 
    var iTop = top;
    var iLeft = (window.screen.width - iWidth) / 2;
     window.showModalDialog(linkURL+"?RequestID=" + id,  "_blank", "dialogHeight=" + iHeight + "px; dialogWidth=" + iWidth + "px; dialogTop=" + iTop + "px;dialogLeft=" + iLeft + "px; toolbar=no; menubar=no; scrollbars=" + scroll + "; resizable=no;location=no; status=no");
}

3.使用window.showModalDialog 并实现返回值的功能

//不带参数功能
function showReturnDialog(linkURL, width, height, top, scroll) {
    var iWidth = width; //窗口宽度 
    var iHeight = height; //窗口高度 
    var iTop = top;
    var iLeft = (window.screen.width - iWidth) / 2;
    return window.showModalDialog(linkURL, "_blank", "dialogHeight=" + iHeight + "px; dialogWidth=" + iWidth + "px; dialogTop=" + iTop + "px;dialogLeft=" + iLeft + "px; toolbar=no; menubar=no; scrollbars=" + scroll + "; resizable=no;location=no; status=no");
}
//带参数功能
function showReturnDialogWithParam(linkURL, id, width, height, top, scroll) {
    var iWidth = width; //窗口宽度 
    var iHeight = height; //窗口高度 
    var iTop = top;
    var iLeft = (window.screen.width - iWidth) / 2;
    return window.showModalDialog(linkURL + "?RequestID=" + id, "_blank", "dialogHeight=" + iHeight + "px; dialogWidth=" + iWidth + "px; dialogTop=" + iTop + "px;dialogLeft=" + iLeft + "px; toolbar=no; menubar=no; scrollbars=" + scroll + "; resizable=no;location=no; status=no");
}

用户评论