Question

我是网络新手。我写了这个jQuery模态窗口：

<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经典模态窗口而不是我的jQuery模态窗口。所以我添加了bootstrap类，但没有改变。我知道它应该很简单但不能做到。谁能帮我？我将非常感激。

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脚本以及样式表。

Bootstrap模态窗口而不是jQuery模态窗口

1 个答案: