【问题标题】:boostrap modal call functions on footer buttons click页脚按钮上的引导模式调用函数单击
【发布时间】:2013-02-26 15:21:09
【问题描述】:

我正在尝试在引导程序上构建一个可配置的模式窗口。我的意图是通过创建函数参数来动态填充模态。

一个参数是标题的标题(titolo),第二个(messaggio)是模态体的文本,可以是html或纯文本,第三个(conferma)是调用的函数如果单击确认按钮(如果存在此函数则创建)并且第四个(callback)是在模态窗口关闭时调用的回调函数。

很遗憾,我无法让它工作,你能帮帮我吗?

function apriModal(titolo,messaggio,conferma,callback){
    jQuery.noConflict();
    var re=new RegExp("</?\w+\s+[^>]*>");
    $("#modalHeaderTitle").text(titolo);
    if(messaggio.match(re)){
        $("#modalBodyText").html(messaggio);
    }
    else{
        $("#modalBodyText").html("<p>"+messaggio+"</p>");
    }
    (typeof conferma == 'function') ? $("#modalConfirm").show() : $("#modalConfirm").hide();
    $("#finestraModal").modal('show');
    $("#modalConfirm").click(function(){
        if(conferma){
            $("#finestraModal").modal('hide');
            conferma.apply();
        }
    });
    $("#modalClose").click(function(){
        if(callback){
            callback.apply();
        }
        $("#finestraModal").modal('hide');
    });
}

这是模态的基本html:

<div id="finestraModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="modalHeaderTitle"></h3>
    </div>
    <div class="modal-body" id="modalBodyText">
    </div>
    <div class="modal-footer">
        <a href="#" id="modalClose" class="btn">Chiudi</a>
        <a href="#" id="modalConfirm" class="btn btn-primary">Conferma</a>
    </div>
</div>

JSFiddle

【问题讨论】:

    标签: jquery function button twitter-bootstrap modal-dialog


    【解决方案1】:

    您已使用jQuery.noConflict(),但在以下脚本中继续使用$

    function apriModal(titolo,messaggio,conferma,callback){
        jQuery.noConflict();
    

    应该改为

    function apriModal(titolo,messaggio,conferma,callback){
        var $ = jQuery.noConflict(); // or other variable name
    

    如果您想使用其他库,可以将jQuery.noConflict() 分配给另一个变量,如我的演示中所示,或者在需要时使用jQuery

    参考:http://api.jquery.com/jQuery.noConflict/

    工作演示:http://jsfiddle.net/indream/X3EnA/1/

    【讨论】:

    • 我不知道.. 我花了几个小时检查代码.. 非常感谢!!!!你救了我很多小时的绝望!但我还是有问题。每次打开模式时,我的代码都会附加一个新闻事件处理程序,所以如果我打开模式 3 次,我会执行 3 次 conferma 和回调函数。我该如何解决这个问题?
    • 您可以在.click() 之前使用.off() 来删除事件处理程序。演示:jsfiddle.net/indream/X3EnA/2
    猜你喜欢
    • 2016-11-19
    • 1970-01-01
    • 2015-10-02
    • 1970-01-01
    • 2013-12-23
    • 1970-01-01
    • 2017-11-08
    • 2022-01-16
    • 2022-11-14
    相关资源
    最近更新 更多