JS如何打开新窗口 showModalDialog和弹出窗口区别

showModalDialog和window.open有什么区别

说到用JS打开新窗口，大家最先想到的肯定是window.open，但其实还有个神器——showModalDialog。它们都是window对象的方法，能打开新的页面，不过区别超明显哦！首先，showModalDialog打开的弹窗是“模态”的，意思是你打开它的时候，主窗口会被锁定，彻底没法操作，焦点全在那个子窗口里；而window.open就不会这么严格，主窗口还能自由切换操作。厉害的是，子窗口还能给主窗口传值，子窗口设置一个window.returnValue，主窗口就能轻松接收，这点window.open没法直接做到。

给你举个例子：
1. 主页面main.html里调用showModalDialog打开b.html，弹窗会以固定大小居中出现。
2. 在b.html里写代码，当关闭弹窗前，把input框里的内容赋给window.returnValue。
3. 主页面showModalDialog返回这个值，马上弹出提示框显示你输入的东西。是不是变得又酷又实用？

JS如何用按钮点击打开文件和设置浏览器弹窗

好了，说完弹窗，还有个超酷玩法，让你点个按钮就能打开指定位置的文件！操作其实很简单：

1. 先创建个HTML文件，比如叫“test.html”，加上基础框架。
2. 页面里放两个元素：一个按钮，一个隐藏的文件输入框，ID都各自设置好。
3. 然后绑定点击事件，点按钮的时候模拟点击隐藏的文件输入框，这样文件选择框就蹦出来啦！
4. 你就可以大胆选文件，继续后续处理。

然后不得不说，弹出窗口的成功率跟浏览器设置息息相关！比如火狐Firefox浏览器：打开工具 > 选项 > 标签，勾选“总是在新标签页打开弹出窗口”；IE浏览器：工具 > 选项 > 标签页，配置弹窗策略；其他支持tab功能的浏览器大同小异。如果弹窗老弹不出来，十有八九是浏览器把你拦截了，去设置里允许就没问题啦！拜托，再不行，就换浏览器呗。

还有一点，不用烦AJAX和iframe新玩法，就是普通网站上用window.open和showModalDialog结合，照样能轻松搞定弹窗跳转。想敲代码？拿这些招数试试，萌新也能秒变高手！

相关问题解答

1. showModalDialog和window.open哪个更适合做弹窗？
   哎呀，这得看你需求啦！showModalDialog打开的弹窗时主窗口没法操作，更适合需要用户强烈交互时用，比如需要先填写信息不能切走。window.open就灵活，主页面还能操作，弹窗跟主窗独立，适合消息提醒啥的，超级方便。

2. 浏览器总是拦截弹出窗口怎么办？
   嗯，这个真的很常见！你可以先去浏览器设置里调整弹窗拦截项，允许你代码中用window.open之类的弹窗。或者，别忘了用事件触发，比如按钮点击触发，浏览器才比较“给面子”放行。试试看吧，别灰心，都会有办法的！

3. 点击按钮如何调用js打开指定文件？
   哦，那你得先设置个隐藏的file input控件，按钮绑定点击事件，代码里调用input的click()方法，逼它弹出文件选择框。简单粗暴又靠谱，用户体验杠杠的，记得给input设置display:none隐藏起来就完美啦。

4. 子窗口如何给主窗口传值？
   哈哈，这简直是showModalDialog的拿手好戏！在子窗口里设置window.returnValue等于你传的内容，然后父窗口调用showModalDialog时会收到返回值，就像悄悄话。是不是超方便？完全搞定数据传输，不用担心复杂回调啦。