logo标签列表

Bootstrap - 编辑模态框后面的文本区域

javascriptjquerytwitter-bootstrap
5

我有一个使用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>

我的用户希望在他们输入答案时可以保持故事问题在模态窗口中打开，这样他们可以检查答案。明显的解决方法是让他们重新打开对话框。但是，显然，这还不够好。我真的需要保持对话框打开，并让用户在其后/下面的文本区域中输入数据。这对我来说似乎很奇怪。但是，这就是我必须要做的。
我的问题是，当我单击
2
如果用户需要打开它，为什么不添加一个带有问题的段落呢？我认为放弃模态框并重新思考页面会更容易。 - Miguel
@Miguel - 我同意你的观点。然而，页面中还涉及到很多其他内容。这只是其中的一小部分。我确实需要找到一种方法来保持对话框的打开状态并编辑其后/下方的 textarea。 - user687554
你可以尝试使用Bootstrap模态框事件，例如$(document).on('hide.bs.modal', function(ev){ ev.preventDefault(); }); 这将防止模态框关闭，但你需要处理页面上的其他元素，我不知道具体情况。 在这里，你可以查看可用的模态框事件..希望能帮到你 http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp - Miguel
如果问题需要保留在对话框中而不是页面上，那么将答案文本框移动到模态框中如何？或者将问题移动到弹出元素而不是对话框中。 - Callum
你不需要一个模态对话框。模态对话框的目的是用户必须在返回到底层页面/应用程序之前关闭它。请参见https://ux.stackexchange.com/questions/12045/what-is-a-modal-dialog-window - Paul
9个回答
4
实际上，获取确切的所需非常简单。

enter image description here

你实际上需要的是一个对话框(Dialog)，而不是模态框(Modal)。
这里有一个使用jQuery UI对话框(Dialog)的工作示例。

解释：

  • 模态框旨在阻止用户与应用程序的交互。
  • 对话框看起来和行为类似，但是设计为让用户继续与页面交互（如果需要，您可以手动设置它来阻止一切）

这里有一个SO讨论

关于这个示例的一些细节：

默认情况下，对话框可以通过标题栏拖动。我让示例与您的模态框类似，因此使用以下方法删除了标题栏：

dialogClass: 'dialog-modal'

和

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

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

和

.parent().draggable();

如果你真的需要一个标题，你可以删除所有这些部分。这里是一个带有标题的示例

2
我的问题是，当我点击文本区域时，对话框会消失。我尝试添加data-backdrop="false"。
这是因为你实际上并没有点击文本区域，而是点击了一个覆盖层元素，该元素在被点击时会关闭模态框。
我不确定是否删除覆盖层元素能让您在文本区域中输入，但即使可以，我也认为这不是一个好主意（删除覆盖层并让您在模态框仍然存在的情况下执行某些操作）。
所以我建议： 在模态框上有一个按钮，当点击它时，应显示另一个文本区域。当您在文本区域中输入内容时，它将更新主文本区域中的内容。
所以这是新的模态框：

enter image description here enter image description here

查看工作中的示例。
2
您想要实现的并不容易实现。
  • 隐藏模态背景 - 容易
  • 移动整个模态 div - 中等难度
  • 使模态后面的文本区域获得焦点 - 非常困难

我理解您想在页面上节省空间，因此建议使用最干净的选项，最接近您想要实现的：Bootstrap 折叠

这里是演示

enter image description here

1
我能想到的解决方案有两种：

  1. 将您的答案

0

另一种解决方案是使用 Popover，在文本区域的焦点事件上实现“模态”功能。

这样做的好处在于，您可以保持用户专注于哪个文本区域属于哪个故事，因为当您移除覆盖层时，可能会失去模态所需的上下文或用户执行像打开多个模态之类的操作。

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

0

我已经制作了一个片段这里，它可以满足您的需求。在模态框显示时，我使用event.key和event.keyCode手动输入到textarea中。

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>

0
您可以通过删除文档事件"focusin.modal"来取消激活模态窗口的“强制焦点”（例如：防止编辑外部文本区域）。
$("#problemModal").on("shown.bs.modal", function() {
    $(document).off("focusin.modal");
});

如果您想在模态框打开后保持光标焦点在文本区域上，只需添加$("textarea").focus();。
$("#problemModal").on("shown.bs.modal", function() {
    $(document).off("focusin.modal");
    $("textarea").focus();
});
0

模态框的定义是“模态”的，也就是说它是一个始终置顶的对话框，因此您只需要将其设置为非模态，使用您的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作为演示。

0

这是一个有点奇怪的问题，需要稍微调整一下，但是我想出了解决方案。

我在模态框中创建了一个文本区域内部，它被隐藏起来，并且会捕获在模态框打开时输入的任何内容。当用户关闭模态框时，焦点将返回到真正的文本区域。

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

谢谢你的尝试。不过，在你的例子中，我仍然无法在对话框打开时编辑“文本区域”。 - user687554
当对话框打开时，您应该能够直接输入，无论您输入什么都将出现在文本区域中。 - Jay McVety
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接