将JavaScript Confirm替换为Foundation-5

我目前使用javascript确认函数来确认表单提交。如何用foundation-5显示模式替换JavaScript确认？

看一看。他们用基金会进行确认。在上，他们甚至有不同类型的确认。

这太晚了，但这是我最近为确认和警报对话框找到的解决方案（对于表单提交，我会拦截提交按钮单击，在noCallback函数中不执行任何操作，并在yesCallback函数中提交表单）：

---

嗨，你能详细解释一下吗？据我所知，这里是模态实现的链接：我非常喜欢这个脚本。工作完美！

function confirmWithFoundation(options, yesCallback, noCallback) {
    options.message = typeof options.message !== 'undefined' ?  options.message : 'Are you sure?';
    options.uniqueIdentifier = typeof options.uniqueIdentifier !== 'undefined' ?  options.uniqueIdentifier : options.message;
    options.yesText = typeof options.yesText !== 'undefined' ?  options.yesText : 'OK';
    options.noText = typeof options.noText !== 'undefined' ?  options.noText : '[CANCEL]';

    var uniqueIdentifier = md5(options.uniqueIdentifier);

    // return out of function if this modal already exists
    // if ($('#' + uniqueIdentifier)) { return };

    var topRow = document.createElement('div');
    topRow.classList.add('row', 'border-bottom');
    var confirmTextContainer = document.createElement('div');
    confirmTextContainer.classList.add('large-12', 'columns');
    var confirmText = document.createElement('h4');
    confirmText.innerHTML = options.message;
    confirmTextContainer.appendChild(confirmText);
    topRow.appendChild(confirmTextContainer);

    var bottomRow = document.createElement('div');
    bottomRow.classList.add('row');
    var buttonContainer = document.createElement('div');
    buttonContainer.classList.add('large-12', 'columns');
    var cancelButton = document.createElement('a');
    cancelButton.classList.add('right', 'text-button-input');
    cancelButton.innerHTML = options.noText;
    var okButton = document.createElement('button');
    okButton.classList.add('right', 'button');
    okButton.innerHTML = options.yesText;
    buttonContainer.appendChild(okButton);
    buttonContainer.appendChild(cancelButton);
    bottomRow.appendChild(buttonContainer);

    var modal = document.createElement('div');
    modal.id = uniqueIdentifier;
    modal.classList.add('reveal-modal', 'confirm-modal', 'small', 'no-padding');
    modal.dataset.reveal = '';
    modal.appendChild(topRow);
    modal.appendChild(bottomRow);

    document.body.appendChild(modal);
    $(modal).foundation('reveal', 'open');

    okButton.onclick = function() {
        yesCallback();
        $(modal).foundation('reveal', 'close');
    };

    cancelButton.onclick = function() {
        noCallback();
        $(modal).foundation('reveal', 'close');
    };
}

function alertWithFoundation(options) {
    options.message = typeof options.message !== 'undefined' ?  options.message : 'Are you sure?';
    options.uniqueIdentifier = typeof options.uniqueIdentifier !== 'undefined' ?  options.uniqueIdentifier : options.message;
    options.yesText = typeof options.yesText !== 'undefined' ?  options.yesText : 'OK';

    var uniqueIdentifier = md5(options.uniqueIdentifier);

    // return out of function if this modal already exists
    // if ($('#' + uniqueIdentifier)) { return };

    var topRow = document.createElement('div');
    topRow.classList.add('row', 'border-bottom');
    var confirmTextContainer = document.createElement('div');
    confirmTextContainer.classList.add('large-12', 'columns');
    var confirmText = document.createElement('h4');
    confirmText.innerHTML = options.message;
    confirmTextContainer.appendChild(confirmText);
    topRow.appendChild(confirmTextContainer);

    var bottomRow = document.createElement('div');
    bottomRow.classList.add('row');
    var buttonContainer = document.createElement('div');
    buttonContainer.classList.add('large-12', 'columns');
    var okButton = document.createElement('button');
    okButton.classList.add('right', 'button');
    okButton.innerHTML = options.yesText;
    buttonContainer.appendChild(okButton);
    bottomRow.appendChild(buttonContainer);

    var modal = document.createElement('div');
    modal.id = uniqueIdentifier;
    modal.classList.add('reveal-modal', 'alert-modal', 'small', 'no-padding');
    modal.dataset.reveal = '';
    modal.appendChild(topRow);
    modal.appendChild(bottomRow);

    document.body.appendChild(modal);
    $(modal).foundation('reveal', 'open');

    okButton.onclick = function() {
        $(modal).foundation('reveal', 'close');
        return false;
    };
}