从jQuery UI到Bootstrap覆盖JS

Question

我需要一些帮助来转换现有的JS功能，这些功能最初是用jQuery UI编写的，现在正转向Bootstrap + jQuery。这个特定的代码使用一种形式来上传图像文件，并且在提交时会显示一个带有两个选项的模态窗口：“我同意”和“取消”。取消只是关闭模式窗口，但我同意提交表格。

这是旧代码：

HTML（旧）

<input type="file" name="customLogo"> 
<input class="btn" type="submit" name="customLogoUpload" value="Upload File">

<div id="logoUploadLegal" class="jq-dialog txtAlnLt" title="Legal">
    By uploading a file ...</p>
</div>

JS（旧）

if( $(form_selector + " .customLogo").length ) {
    test_edit_form_legal_notice_dialog_hook(form_selector, "#logoUploadLegal", "input[name=customLogoUpload]");
}

function test_edit_form_legal_notice_dialog_hook(form_selector, dialog_selector, upload_btn_selector)
{
    var upload_button_used = false,
        legal_ok = false;

    $(form_selector + " input:submit").on("click", function() {
        if( $(form_selector + " " + upload_btn_selector).is(this) )
            upload_button_used = true;
        else
            upload_button_used = false;
    });

    $(form_selector).on("submit", function() {
        if( !$(form_selector + " input:file").val().length )
            return true;

        if( legal_ok )
            return true;

        $(dialog_selector).dialog({
            modal: true,
            draggable: true,
            resizable: true,
            width: 400,

            buttons: {
                "I agree" : function() {
                    legal_ok = true;
                    if( upload_button_used )
                        $(form_selector + " " + upload_btn_selector).click();
                    else
                        $(form_selector).submit();
                },
                "Cancel" : function () {
                    $(this).dialog("close");
                }
            }
        });

        return false;
    });
}

JS（新）

，这是我尝试转换为新代码的尝试。我只是不太了解如何使用模式按钮...

HTML（新）

<div class="form-group">
     <input id="customLogo" type="file" name="customLogo"> 
</div>
<input class="btn btn-default" type="submit" name="customLogoUpload" value="Upload File">

<div id="logoUploadLegal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header h4">
                Legal
            </div>
            <div class="modal-body">
                By uploading a file ...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default logoUploadLegalConfirm" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

JS（旧）

function test_edit_form_legal_notice_dialog_hook(form_selector, dialog_selector, upload_btn_selector)
{
    var upload_button_used = false,
        legal_ok = false;

    $(form_selector + " input:submit").on("click", function() {
        if( $(form_selector + " " + upload_btn_selector).is(this) )
            upload_button_used = true;
        else
            upload_button_used = false;
    });

    $(form_selector).on("submit", function() {
        if( !$(form_selector + " input:file").val().length )
            return true;

        if( legal_ok )
            return true;


        $(dialog_selector).modal(function(){

            $(dialog_selector).on('click', 'button', function() {
                console.log(upload_button_used);
            });
        //
        //  buttons: {
        //      "I agree" : function() {
        //          legal_ok = true;
        //          if( upload_button_used )
        //              $(form_selector + " " + upload_btn_selector).click();
        //          else
        //              $(form_selector).submit();
        //      },
        //      "Cancel" : function () {
        //          $(this).dialog("close");
        //      }
        //  }
        });

        return false;
    });
}