javascript中模式弹窗与非模式弹窗是什么意思?如何用?

JavaScript016

javascript中模式弹窗与非模式弹窗是什么意思?如何用?,第1张

模态和非模态的区别在于,模态窗体弹出后需要将其窗体关闭后才能进行除该窗体以外的其他操作,通俗点说就是除了该窗体上的操作,其他的操作都无效

原生JS用法:

模态:window.showModalDialog(非标准)

非模态:window.showModelessDialog(IE5+,非标准),window.open(所有浏览器,标准)

不推荐使用以上三种方法实现模态窗体,原因有二:

一是以上方法在各个浏览器上表现各不一样,不一定能兼容所有主流浏览器(未测试,但我知道肯定不行)

二是如今大多数现代浏览器会屏蔽掉弹出窗体,会给您实现功能造成极大的障碍

使用JS模拟弹出窗体:

使用层(一般是div)模拟一个窗体,将其放置在所有层之上,加上希望的功能,比如close,resize等等,其中的内容如果是其他页面,我们可以用iframe,这些都很灵活,可以自己定义规则,这样就形成了一个非模态窗体。

在上面的基础上,在窗体层下放置一个mask层,其作用在于不让操作除窗体层以外的内容,最后将mask层设置为深色并且半透明,这样就形成了一个模态窗体了。

以上只是原理,毕竟自己来做很恼火,当今主流js框架都实现了类似的功能,比如jQuery,ext等,用法也很简单,也很兼容各种主流浏览器,所以使用js框架来实现是最推荐的

希望对您有帮助~

By Billskate

你可以咋点击SubmitForm方法里面调起模态框,然后模态框里面的两个按钮定义两个方法,一个确认一个取消,然后在确认方法里面取提交你的form;

或者在模态框上定义一个方法,通过传参去判断是确认还是取消,然后在确认方法里面取提交你的form;