将JS确认框更改为Twitter Bootstrap模态框

Question

我有一段JavaScript代码，用于向用户显示确认对话框并传递变量以确认他们的操作。

然而，我必须将简单的确认对话框更改为 Twitter Bootstrap 模态框。

我尝试了几次，阅读了很多 SO 帖子和 Twitter Bootstrap 文档，但由于我的 JavaScript 知识不够好，我无法使其正常工作。我在在 Twitter Bootstrap 模态框中显示变量时遇到了问题。

希望有人能够通过给我一些指针来帮助我解决问题。

这是我当前的 js 对话框代码：

    function checkboxUpdated(checkbox, count, label, id) {

        if (checkbox.checked) {

            $('#menu_entry_' + id).show();

        } else {

            if (count > 0) {

                if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) {

                    checkbox.checked = true;
                    return;

                }

            }

            $('#menu_entry_' + id).hide();

        }

    }

编辑：根据评论要求，添加了#menu_entry_的代码：

{% for id, menu_entry, selected, item_count in menu_entries %}

    <li id="menu_entry_{{ id }}" {% if not selected %}style="display:none;"{% endif %}>

        <a 

            {% if id == 4 %}

                href="{% url summary_details %}"

            {% elif id == 8 %}

                href="{% url objective_details %}"

            {% elif id == 12 %}

                href="{% url leading_employment_details %}"

            {% elif id == 16 %}

                href="{% url desired_occupation_details %}"

            ....

            {% elif id == 112 %}

                href="/"

            {% else %}

            href="/"

            {% endif %}

            onclick="showProgressAnimation();">

请注意，我需要将以下JS确认代码转换为Twitter Bootstrap模态框代码：

if (! confirm('{% trans "You have '+ count +' saved '+ label +'.\n\nIf you leave this option un-checked your saved '+ label +' will be deleted only after you update this page.\n\nAre you sure you want to delete your ' + count + ' saved ' + label +'?" %}')) {

- user1261774

---

需要查看 #menu_entry_* 的 HTML。 - cvrebert

Answer 1

你可以编写自己的jQuery插件。首先，将Bootsrap的模态框组件添加到您的文档中。

<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="confirm-label" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="confirm-label"></h4>
      </div>
      <div class="modal-body">
        <p class="message"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default dismiss" data-dismiss="modal"></button>
        <button type="button" class="btn btn-primary confirm" data-dismiss="modal"></button>
      </div>
    </div>
  </div>
</div>

基本上，插件应在调用时显示模态框，并在确认按钮被按下时触发confirm事件，否则触发dismiss。

$.fn.confirm = function (options) {
  var settings = $.extend({}, $.fn.confirm.defaults, options);

  return this.each(function () {
    var element = this;

    $('.modal-title', this).html(settings.title);
    $('.message', this).html(settings.message);
    $('.confirm', this).html(settings.confirm);
    $('.dismiss', this).html(settings.dismiss);

    $(this).on('click', '.confirm', function (event) {
      $(element).data('confirm', true);
    });

    $(this).on('hide.bs.modal', function (event) {
      if ($(this).data('confirm')) {
        $(this).trigger('confirm', event);
        $(this).removeData('confirm');
      } else {
        $(this).trigger('dismiss', event);
      }

      $(this).off('confirm dismiss');
    });

    $(this).modal('show');
  });
};

我们可以对上述代码进行改进，即公开默认插件设置。

$.fn.confirm.defaults = {
  title: 'Modal title',
  message: 'One fine body…',
  confirm: 'OK',
  dismiss: 'Cancel'
};

使用示例：

$('#confirm').confirm().on({
  confirm: function () {
    console.log('confirm');
  },
  dismiss: function () {
    console.log('dismiss');
  }
});

看这里有现成的例子：http://jsfiddle.net/cdog/4q9t9pk5/。如果您不想编写自己的解决方案，可以尝试使用现有的项目，例如：https://github.com/nakupanda/bootstrap3-dialog。它看起来就是您所需要的。文档和演示在此处可用：http://nakupanda.github.io/bootstrap3-dialog/。

- cdog

Answer 2

演示

您想要将您的函数更改为下面所示。 然后，需要在页面上添加模态标记（请参见演示），并显示下面的事件侦听器：

function checkboxUpdated(checkbox, count, label, id) {
    if (checkbox.checked) {
        $('#menu_entry_' + id).show();
    } else {
        if (count > 0) {
            //save data to use later
            $('#message_p').text( '<the-message-to-show-on-the-modal>' )
            .data('elem', '#menu_entry_' + id)
            .data('chkbox', checkbox);

            //set modal title
            $('#title_h4').text( '<Modal Title>' );

            //show modal
            $('#confirm_modal').modal('show');
        }
    }
}

$(document).ready(function() {
    $('.button-yes').on('click',function() {
        var checkbox = $('#message_p').data('chkbox');
        checkbox.checked = true;
        $('#confirm_modal').modal('hide');
    });

    $('#confirm_modal').on('hidden.bs.modal', function() {
        var elem = $('#message_p').data('elem');
        $(elem).hide();
    });
});

注意：如果您有任何问题，请告诉我们。

- PeterKA