javascript – 将js确认更改为twitter bootstrap模式

我有一些 JavaScript向用户显示一个确认对话框,以确认传入变量的操作.

但是,我必须将普通的确认对话框更改为twitter-bootstrap模式.

我已经尝试了好几次,阅读了很多SO帖子并阅读了twitter bootstrap文档,但我无法让它工作,因为我对js的了解还不够好.我陷入了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 +'?" %}')) {

解决方法

你可以编写自己的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>

基本上,插件应该在调用时显示模态,如果按下确认按钮则触发确认事件或否则解除.

$.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/.