如何将参数传递给Bootstrap模式？

<button type="button" class="btn btn-primary" data-toggle="modal" data-param1="value1" data-param2="value2" data-target="#myModal">
  打开模态框
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
      </div>
      <div class="modal-body">
        <p>参数1的值： <span id="param1"></span></p>
        <p>参数2的值： <span id="param2"></span></p>
      </div>
    </div>
  </div>
</div>

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // 触发模态框的按钮
  var param1 = button.data('param1'); // 获取参数1的值
  var param2 = button.data('param2'); // 获取参数2的值

  // 将参数的值设置到模态框中
  $('#param1').text(param1);
  $('#param2').text(param2);
});

<button type="button" class="btn btn-primary" onclick="openModal('value1', 'value2')">打开模态框</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
      </div>
      <div class="modal-body">
        <p>参数1的值： <span id="param1"></span></p>
        <p>参数2的值： <span id="param2"></span></p>
      </div>
    </div>
  </div>
</div>

function openModal(param1, param2) {
  var modal = document.getElementById('myModal'); // 获取模态框的DOM元素
  var param1Element = modal.querySelector('#param1'); // 获取参数1的DOM元素
  var param2Element = modal.querySelector('#param2'); // 获取参数2的DOM元素

  // 设置参数的值
  param1Element.textContent = param1;
  param2Element.textContent = param2;

  // 打开模态框
  $(modal).modal('show');
}