javascript – Bootstrap – 在Modal后面编辑TextArea

我有一个使用Bootstrap 3的网页.在这个页面中,我需要一个人可以回答的文本区域.答案是故事问题.故事问题出现在模态对话框中.设置可以在这个Bootply中看到.代码如下所示:

我的用户希望能够在他们输入答案时在模态窗口中打开故事问题.这将让他们仔细检查他们的答案.显而易见的答案是让他们重新打开对话框.但是,显然,这还不够好.我真的需要保持对话框打开,让用户在其后面/下面的文本区域中输入数据.对我来说似乎很奇怪.但是,这就是我要做的.

我的问题是,当我点击textarea时,对话框消失了.我尝试添加data-backdrop =“false”.虽然保持对话框打开,但它并没有让我实际编辑textarea.我错过了什么?

最佳答案
实际上,获得你想要的东西非常简单.

enter image description here

您实际需要的是对话而不是模态.

这是一个使用jQuery UI Dialog的working example.

说明:

>模态旨在阻止用户与应用程序的交互.
> dialog外观和行为类似,但旨在让用户继续与页面交互(如果需要,可以手动设置它以阻止所有内容)

这是关于它的SO discussion

有关示例的一些细节:

默认情况下,标题可以拖动对话框.我保持示例类似于你的模态,所以我使用以下方法取出标题

dialogClass: 'dialog-modal'

.dialog-modal .ui-dialog-titlebar {
  display:none;
}

为了使整个对话框可以拖动,我使用了:

draggable: false

.parent().draggable();

如果您确实需要标题,则可以删除所有这些部分.这是example with a header

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...