变化JS确认到Twitter的引导模式

Question

我有一些JavaScript，显示一个确认对话框，用户确认他们与变量传递行动。

但是，我必须改变简单的确认对话框到Twitter的引导模式。

我已经试了好几次，看了很多帖子SO和阅读Twitter的引导文档，但我不能把它作为我的js的知识工作不够好。我陷入了twitter引导模式中的变量显示。

我希望有人能帮助我通过给我一些指点。

这里是我当前的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的引导模式代码：

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 +'?" %}')) { 

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> 

基本上，该插件调用时应该显示的模态，并且如果确认按钮被按下或以其他方式dismiss触发事件confirm。

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

Answer 2

DEMO

你想改变你的功能，如下图所示。然后是模态标记添加到页面（见演示）和下图所示的事件监听器：

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(); 
    }); 
}); 

注：让我们知道，如果你有任何问题。