Bootstrap - 编辑Modal背后的TextArea

Question

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

<div class="container">
  <form>
    <div class="form-group">
      <label>Answer (<a id="showProblemLink" href="#">view problem</a>)</label>
      <textarea class="form-control" rows="7">      </textarea>
    </div>
  </form>

  <div id="problemModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
            <p>
            The local school wants a new playground.
            The lot they can use for the playground is shaped like a rectangle.
            The school has decided to let the students design the new playground.
            The students have decided that they want 1/4 of the playground to be a football field.
              Another 3/8 of the lot will be used for a basketball court.
              How much of the lot is remaining for the slides and swings?
            </p>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>        
      </div>      
    </div>
  </div>  
</div>

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

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

Answer 1

事实上，想要得到你想要的东西非常简单。

您实际上正在寻找的是对话框而不是模态。

这是一个使用 jQuery UI 对话框的工作示例。

解释：

• 模式旨在阻止用户与应用程序交互。
• 对话框的外观和行为类似，但旨在让用户继续与页面交互（如果需要，您可以手动将其设置为阻止所有内容）

这是一个关于它的讨论

有关该示例的一些详细信息：

默认情况下，对话框可通过标题拖动。我保留了与您的模式类似的示例，因此我使用以下方法取出了标题：

dialogClass: 'dialog-modal'

和

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

为了使整个对话框可拖动，我使用了：

draggable: false

和

.parent().draggable();

如果您确实想要标题，则可以删除所有这些部分。这是一个带有标题的示例