Bootstrap 模态 window 而不是 jQuery 模态 window

Question

我是网络新手。我写了这个 jQuery 模态 window:

<div id="dialog" title="Basic dialog" class="modal-body" style="display:none;">
  <p>@Html.TextArea("commentForDecline")</p>
  <button title="Ok" class="btn btn-primary ok-request">Ok</button>
</div>

这是我的 JavaScript 代码：

function declineButtonClick(th) {    
  tempId = $(th).attr('data-id');
  $('#dialog').attr('data-id', tempId);
  $("#dialog").dialog();
}

$('button.ok-request').click(function () {
  var tempId = $('#dialog').attr('data-id');
  var message = $('textarea#commentForDecline').val();
  $.ajax({
    type: "POST",
    url: "/TableRequest/DeclineRequest",
    data: { 'message': message, 'id': tempId },
      success: function (msg) {
    }
  });
  $("#dialog").dialog('close');
  $('button[data-id="' + tempId + '"]')
    .parent()
    .parent()
    .find('div.True')
    .attr('class', "False");

  $('button[data-id="' + tempId + '"]')
    .parent()
    .parent()
    .find('img.decline-img')
    .show();

  $('button[data-id="' + tempId + '"]')
    .parent()
    .parent()
    .find('img.accept-img')
    .hide();

  $('button[data-id="' + tempId + '"]')
    .parent()
    .find('button.decline-button')
    .hide();

  $('button[data-id="' + tempId + '"]')
    .parent()
    .find('button.accept-button')
    .show();

  $('textarea#commentForDecline').val('');
});

我需要放置 bootstrap classic 模态 window 而不是我的 jQuery 模态 window。所以我添加了 bootstrap class，但没有任何改变。我知道这应该很简单但做不到。谁能帮我？我将不胜感激。

Answer 1

确保您已在视图中包含 bootstrap js (bootstrap.js)

如果您通过 javascript 打开模式，请使用正确的语法：

$("#dialog").modal(//options);

// within the on-click function
$("#dialog").modal('show');

如果您通过模态标记打开它，请使用正确的语法：

<button type="button" class="btn" data-toggle="modal" data-target="#dialog">Click Me</button>

<div id="dialog" class="modal" role="modal" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modalLabel">Basic Dialog</h4>
      </div>
      <div class="modal-body">
        <p>@Html.TextArea("commentForDecline")</p>
        <button title="Ok" class="btn btn-primary ok-request">Ok</button>
      </div> // end of body
    </div> // end of modal content
  </div> // end of modal dialog
</div> // end of modal div

无论选择哪种方式打开模态框，都需要声明bootstrap.js脚本以及样式sheet。

Bootstrap 模态 window 而不是 jQuery 模态 window

Bootstrap modal window instead of jQuery modal window

asp.net-mvc

jquery

twitter-bootstrap-3