javascript – Bootstrap – 在Modal后面编辑TextArea

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

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

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

最佳答案

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

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

这是一个使用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