首页 > 建站教程 > JS、jQ、TS >  window.showModalDialog is not a function正文

window.showModalDialog is not a function

今天我爱模板网给一个网站做分享的时候,需要用到很久都不用但过去很常用的弹窗功能——模态框。

我记得模态框是这么写的:
window.showModalDialog(url,配置参数,宽高)
于是写了下面的代码:
function share(type){
    let url = '';
    let tit = '';
    switch(type){
        case 'weibo':
            url = 'https://service.weibo.com/share/share.php?url=地址&title=标题&pic=图片'
            tit = '分享到微博'
            break;
        case 'twitter':
            url = 'https://twitter.com/share?url=地址&text=标题'
            tit = '分享到微博'
            break;
        case 'facebook':
            url = 'https://www.facebook.com/sharer/sharer.php?u=地址'
            tit = '分享到微博'
            break;
    }
    var obj = new Object();
    obj.name = tit;
    if(window.showModalDialog){
        window.showModalDialog(url,obj,"dialogWidth=200px;dialogHeight=100px");
    }else{
        window.open(url,obj,"dialogHeight:200px;dialogWidth:100px");
    }
}
结果发现在edge和chrome上都报错了:
window.showModalDialog is not a function

换成IE就没问题。应该是现代浏览器都不支持showModalDialog。但是window.open打开窗口还是支持的,于是做了个判断:
if(window.showModalDialog){
    window.showModalDialog(url,obj,"dialogWidth=200px;dialogHeight=100px");
}else{
    window.open(url,obj,"dialogHeight:200px;dialogWidth:100px");
}
其实设置了window.open的宽高,就是window.showModalDialog了,只是老浏览器不支持window.open设置更多参数。