javascript - 将 jQuery (AJAX) 的结果设置为 Bootstrap 模式

Question

是否可以将 jQuery 函数的结果显示到 Bootstrap 模式中？我有一张表格，当用户单击一个特定列时，模式应显示适当的数据。

    <script type="text/javascript">
   function getBreak(breakid,pos,countrycode){
      $.ajax({
       url: "{{ url('getBreak') }}",
       type: "GET",
       data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
       success: function (result) {$('#myModal').modal('show');},
       error: function(data){
            alert("Error")
        }
      });
   }
</script>

这是一个非常基本的模式，我想在其中更改插入数据。

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

是否可以以某种方式将我从 getBreak() 函数获得的 html 内容附加到模式中？

Answer 1

是的，可以使用这个。

    <script type="text/javascript">
   function getBreak(breakid,pos,countrycode){
      $.ajax({
       url: "{{ url('getBreak') }}",
       type: "GET",
       data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
       success: function (result) {
       $('#divhtml').html(result);
       $('#myModal').modal('show');},
       error: function(data){
            alert("Error")
        }
      });
   }
</script>

在设计中你必须这样做

<div id="myModal" class="modal fade" role="dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
   <div id="divhtml"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>