我有一些
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(); } }
{% 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">×</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/.