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 Dialog的working example。

说明：

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

这是关于它的SO discussion

有关示例的一些细节：

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

dialogClass: 'dialog-modal'

和

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

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

draggable: false

和

.parent().draggable();

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

Answer 2

你想要实现的目标并非易事。

隐藏模态背景 - 容易
移动整个模态div - 中等
使模态背后的文本区域成为焦点 - 非常困难

我知道你想节省页面空间，这就是为什么我会建议最干净的选择，并且最接近你想要实现的目标：Bootstrap Collapse

DEMO here

Answer 3

我的问题是，当我点击textarea时，对话框消失了。我尝试添加data-backdrop =“false”。

这是因为您实际上没有单击textarea，而是单击了一个覆盖元素，该元素会在单击时关闭模式。

我不确定删除叠加元素是否能够在文本区域输入，但即便如此，我认为这不是一个好主意（删除叠加层并且能够在模态仍在运行时执行某些操作）。

所以我的建议是：点击时在模态上有一个按钮，它应该显示另一个textarea。当您在textarea上输入内容时，它会更新主文本区域内的内容。

所以这是新的模式：

见工作example。

Answer 4

我能想到的一些解决方案是：

将你的答案textarea移动到有问题的对话框中。
或使用弹出窗口而不是模态。

所以here is my example使用popover而不是modal。

Stackoverflow片段，看起来很糟糕，因为它缺少所有引导样式，所以请检查bootply链接：

$(".pop-div > a").popover({
  html: true,
  placement: "left",
  trigger: "click",
  title: function() {
    return $(this).siblings('.pop-title').text()
  },
  content: function() {
    return $(this).siblings('.pop-content').text()
  }
});

.pop-div {
  display: inline;
}
.pop-title,
.pop-content {
  display: none;
}
.popover-title {
  font-size: 15px;
}
.popover-content {
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <form>
    <div class="form-group">
      <label>Answer (
        <div class="pop-div">
          <a href="javascript:void(0);">view problem</a>
          <div class="pop-title">Question</div>
          <div class="pop-content">
            <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>
        )</label>
      <textarea class="form-control" rows="7"></textarea>
    </div>
  </form>
</div>

Answer 5

由于这是一个奇怪的问题，这需要一些小小的问题，但这是我提出的解决方案。

我在视图中隐藏的模态中创建了一个textarea，并将捕获模态打开时完成的任何键入。当用户关闭模态时，焦点将被发送回真正的文本区域。

HTML（略有修改）：

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

  <div id="problemModal" class="modal" tabindex="-1" role="dialog" data-backdrop="false">
    <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>
            <textarea id="inside-modal"></textarea>
        </div>

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

CSS：

textarea#inside-modal {
  position:absolute;
  left:-4000px;
}

jQuery的：

$("#showProblemLink").on("click", function() {
    //show the modal
  $('#problemModal').modal('show');
  //fill the hidden textarea with the real textarea's contents
  $('#problemModal textarea#inside-modal').val($('textarea#outside-modal').val());
  //capture user input in modal and send to outside textarea
  $('#problemModal textarea#inside-modal').on('input',function(e) {
    //fill the outside textarea with the inside textarea's contents
    $('textarea#outside-modal').val($('textarea#inside-modal').val());
  }).focus();
});
//when modal closed, send focus back to textarea
$("#problemModal").on('hidden.bs.modal',function() {
  $('textarea#outside-modal').focus();
});

见this bootply

Answer 6

另一种解决方案是使用Popover，在textarea的焦点事件中，您有一个“类似模态”的功能。

这样做的好处是，你保留了让用户专注于哪个textarea属于哪个故事的能力，就像当你移除叠加层时你可能会失去需要模态的上下文，或者用户执行打开多个模态的事情，等等

http://getbootstrap.com/javascript/#popovers

Answer 7

我已经制作了一个片段here，可以满足您的需要，我可以使用textarea和event.key手动输入event.keyCode，同时显示模态。

var $text = $('#textarea');
var backEdit = false;
var $modal = $('#problemModal');
$("#showProblemLink").on("click", function() {
  $modal.modal('show');
});

$modal.on('shown.bs.modal', function() {
  backEdit = true;
})
$modal.on('hidden.bs.modal', function() {
  backEdit = false;
})
$(document).keypress(function(e) {
  if (backEdit) {
    var keyCode = e.keyCode;
    formatTextArea(keyCode);
  }
});

function formatTextArea(keycode) {
  var val = $text.val();
  var caretPos = $text[0].selectionStart;
  var textAreaTxt = $text.val();
  $text.val(textAreaTxt.substring(0, caretPos) + String.fromCharCode(keycode) + textAreaTxt.substring(caretPos));
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <form>
    <div class="form-group">
      <label>Answer (<a id="showProblemLink" href="#">view problem</a>)</label>
      <textarea class="form-control" rows="7" id="textarea"></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>

Answer 8

模态是每个定义'模态'又名'永远在顶部对话'，所以你要做的就是使它非模态，使用你的html布局这可以通过jQuery完成：

$('#problemModal').removeClass('modal')
    .hide()
    .css('position','absolute')
    .css('top',0)
    .css('left',(screen.width - $('#problemModal').width())/2);
$("#showProblemLink").on("click", function() {
    $('#problemModal').show();
});

$('#modal-close-btn').click(function(){
    $('#problemModal').hide();
});

这是一个有效的Bootply作为演示。

Answer 9

您可以通过删除文档事件“focusin.modal”来停用模式“强制焦点”（例如：阻止外部文本区域的编辑）：

$("#problemModal").on("shown.bs.modal", function() {
    $(document).off("focusin.modal");
});

如果要在模态打开后将光标焦点保持在textarea上，只需添加$("textarea").focus();

$("#problemModal").on("shown.bs.modal", function() {
    $(document).off("focusin.modal");
    $("textarea").focus();
});

Bootstrap - 编辑Modal背后的TextArea

问题描述投票：5回答：9

9个回答

最新问题

Bootstrap - 编辑Modal背后的TextArea

问题描述 投票：5回答：9

9个回答

最新问题

问题描述投票：5回答：9