我刚刚开始了我自己的一个新项目。我想做的是，在大屏幕上，有一个按钮激活模态窗口但是，在较小的屏幕（手机）上，我希望该模态窗口成为画布外部分，当单击按钮时，画布外从侧面滑入。在该模态/非画布部分中，将有一个表格要填写。（实际上会有多个按钮需要激活该功能。想想多个缩略图，每个按钮都有一个按钮，让观众添加评论）
我使用 Bootstrap 3 作为我的基本框架。我想最小化 javascript (jQuery) 功能，但我知道我不能完全这样做。
我有问题，我是否必须创建两个 HTML 部分，一个用于模式，一个用于画布外，然后根据屏幕大小以编程方式隐藏/显示？
最好创建表单，然后通过 javascript，根据屏幕大小在其周围添加适当的 HTML？（虽然我认为这个选项很难实现，因为我的 javascript 技能充其量只是“高级初学者”）
如何使模态窗口或画布外表单的相同按钮开关激活？
在我看来，我需要检测屏幕尺寸，无论我如何做上述，检测屏幕尺寸的最佳方法是什么，最安全，最可靠的方法是什么？
感谢你们对此的任何见解。
您必须在此处的问题中显示代码，因此我也投票结束您的问题。
我使用 Bootstrap 3 作为我的基本框架。我想最小化 javascript (jQuery) 功能，但我知道我不能完全这样做。
Angular JS 将 Twitter 的 Bootstrap 与 javascript 分离。见：http ://angular-ui.github.io/bootstrap/
我有问题，我是否必须创建两个 HTML 部分，一个用于模式，一个用于画布外，然后根据屏幕大小以编程方式隐藏/显示？
看看响应式实用程序：http ://getbootstrap.com/css/#responsive-utilities Twitter 的 Bootstrap 的屏幕检测基于 CSS 媒体查询。
如何使模态窗口或关闭画布>表单的相同按钮开关激活？
要基于 sceensize 为相同的按钮提供不同的功能，您将需要 javascript / jQuery。请参阅：获取屏幕大小、当前网页和浏览器窗口，您也可以考虑使用类似enquire.js的内容，另请参阅http://bassjobsen.weblogs.fm/responsive-banner-ads-2/
或者创建两个按钮并使用响应式实用程序隐藏/显示它们。