Question

目前，按钮会打开包含文本框的模式。我需要预先填充该文本框，所以我试图在没有运气的情况下搞乱模式。

我尝试过以下操作，似乎没有任何事情发生。

function testFunc(){
    $('#contactUsDlg').modal('show');
    $('#contactUsDlg').on('shown.bs.modal', function {
       $('#message-text').text("test");
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" name="btn-ask" id="nonconform-btn" data-form-action-url="${newMessageUrl}"
                                data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>"
                                data-use-ajax="true"
                                class="btn btn-submit btn-ask contact-us-dlg"
                                data-hidden-fields="message-order-id,message-source-url"
                                data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" >
                                Contact Us
</button>

Answer 1

这是一个可能的解决方案，基于你的片段（不完整，恕我直言）

$(document).ready(function() {
  $('#contactUsModal').on('show.bs.modal', function(e) {
    var text = $(e.relatedTarget).data('default-text');
    $(this).find('#message-text').text(text);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<button type="button" name="btn-ask" class="btn btn-submit btn-ask contact-us-dlg" data-form-action-url="${newMessageUrl}" data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>" data-use-ajax="true" data-hidden-fields="message-order-id,message-source-url"
data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" data-toggle="modal" data-target="#contactUsModal" data-default-text="Initial contact us textarea modal content">
  Contact Us
</button>

<div class="modal fade" id="contactUsModal" tabindex="-1" role="dialog" aria-labelledby="contactUsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

Answer 2

如果您还没有，那么您应该考虑使用jQuery UI。在这里，您可以使用以下内容：

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-ui-1.12.1.custom/jquery-ui.js'></script>
<link href='jquery-ui-1.12.1.custom/jquery-ui.css' rel='stylesheet' type='text/css'></link>
<link href='jquery-ui-1.12.1.custom/jquery-ui.theme.css' rel='stylesheet' type='text/css'></link>

<input id='mybutton' type='button' value='click me' />
<div id='result'>
    <p id='firstp'></p>  
    <p id='secondp'></p>
</div>

<script>
$(function() {
    $('#result').dialog({
        open: function(event, ui) {
            $('#resultp').html('[this is my text]');
        }
    });
});
$('#mybutton').on('click', function(evt) {
    $('#secondp').html('[this is my second text]');
});
</script>

使用文本预填充模态文本区域

2 个答案: