谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

 更新时间:2016年02月15日 17:02:18   作者:哼哈恩恩  
这篇文章给大家介绍了谷歌showModalDialog()方法不兼容出现对话窗口的解决办法,解决办法非常好,感兴趣的朋友可以参考下

showModalDialog,在测试中,IE,Firefox中正常运行,但是在google中,点击后没什么反应,在网上看了一下,谷歌浏览器不支持showModalDialog模态对话框和无法返回returnValue,得到了一个解决办法

<script type="text/javascript">
//开启模式窗口
function showMyModal() {
var url = "SelectUser.aspx";
//传入参数示例
var modalReturnValue = myShowModalDialog(url, window, 300, 500);
//alert(modalReturnValue.name);
//窗口关闭后执行某些方法
//TODO sth
}
//弹出框google Chrome执行的是open
function myShowModalDialog(url, args, width, height) {
var tempReturnValue;
if (navigator.userAgent.indexOf("Chrome") > 0) {
var paramsChrome = 'height=' + height + ', width=' + width + ', top=' + (((window.screen.height - height) / 2) - 50) +
',left=' + ((window.screen.width - width) / 2) + ',toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no';
window.open(url, "newwindow", paramsChrome);
}
else {
var params = 'dialogWidth:' + width + 'px;dialogHeight:' + height + 'px;status:no;dialogLeft:'
+ ((window.screen.width - width) / 2) + 'px;dialogTop:' + (((window.screen.height - height) / 2) - 50) + 'px;';
tempReturnValue = window.showModalDialog(url, args, params);
}
return tempReturnValue;
}
</script> 

最后想要点击就可以出现对话框就行,只需要使用onclick事件进行调用方法就行

以上给大家介绍了谷歌showModalDialog()方法不兼容出现对话窗口的问题分析及解决办法,希望对大家有所帮助。

相关文章

  • JS 图片压缩原理与实现方法详解

    JS 图片压缩原理与实现方法详解

    这篇文章主要介绍了JS 图片压缩原理与实现方法,结合实例形式详细分析了JS 图片压缩原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • iSlider手机端图片滑动切换插件使用详解

    iSlider手机端图片滑动切换插件使用详解

    这篇文章主要为大家详细介绍了iSlider手机端图片滑动切换插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 响应式表格之固定表头的简单实现

    响应式表格之固定表头的简单实现

    下面小编就为大家带来一篇响应式表格之固定表头的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 利用Webpack实现小程序多项目管理的方法

    利用Webpack实现小程序多项目管理的方法

    这篇文章主要介绍了利用Webpack实现小程序多项目管理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • js+html5实现手机九宫格密码解锁功能

    js+html5实现手机九宫格密码解锁功能

    这篇文章主要为大家详细介绍了js+html5实现手机九宫格密码解锁功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • js的2种继承方式详解

    js的2种继承方式详解

    这篇文章主要介绍了javascript的2种继承方式,分析对象冒充和原型链方式的不同,需要的朋友可以参考下
    2014-03-03
  • swiper 解决动态加载数据滑动失效的问题

    swiper 解决动态加载数据滑动失效的问题

    下面小编就为大家分享一篇swiper 解决动态加载数据滑动失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JS判断网页广告是否被浏览器拦截过滤的代码

    JS判断网页广告是否被浏览器拦截过滤的代码

    这篇文章主要介绍了JS判断网页广告是否被浏览器拦截过滤的代码,需要的朋友可以参考下
    2015-04-04
  • Javascript操作select控件代码实例

    Javascript操作select控件代码实例

    这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • 微信小程序中如何使用flyio封装网络请求

    微信小程序中如何使用flyio封装网络请求

    这篇文章主要介绍了微信小程序中如何使用flyio封装网络请求,Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API,需要的朋友可以参考下
    2019-07-07

最新评论