Javascript 中的 mac OS 设计中的 alert()

Question

我受到这个线程JsFiddle 的启发，alert()用 css 设计创建了 javascript ，但我试图在 Mac OS 设计中执行此警报，但我无法实现这一点。它将为您提供帮助，我如何在警报中转换我的代码，以便当我alert('{MY_Content}')在 Javascript 或 jQuery 中运行时，它会在我的设计中显示如下JsFiddle：我的代码在下面显示在 Mac Design 中，这是我的JSFiddle：你会这么好心帮助我，请帮忙.. :(

Answer 1

您还需要创建一个 JS 文件。您的 JS 文件将包含您的自定义警报功能。您将通过以下行覆盖默认警报功能

window.alert = myAlertFunction

您将创建一个函数“myAlertFunction”，它有一个参数，即要在警报中显示的文本。

如果需要，您可以只使用第一个 JSFiddle 中的那个。

function myAlertFunction(txt) {

    d = document;

    if(d.getElementById("modalContainer")) return;

    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));

    mObj.id = "modalContainer";

    mObj.style.height = d.documentElement.scrollHeight + "px";

    alertObj = mObj.appendChild(d.createElement("div"));

    alertObj.id = "alertBox";

    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";

    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

    alertObj.style.visiblity="visible";

    h1 = alertObj.appendChild(d.createElement("h1"));

    h1.appendChild(d.createTextNode(ALERT_TITLE));

    msg = alertObj.appendChild(d.createElement("p"));

    //msg.appendChild(d.createTextNode(txt));

    msg.innerHTML = txt;

    btn = alertObj.appendChild(d.createElement("a"));

    btn.id = "closeBtn";

    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));

    btn.href = "#";

    btn.focus();

    btn.onclick = function() { removeCustomAlert();return false; }

    alertObj.style.display = "block";

}

最后，一个小功能，去除警报

function removeCustomAlert() {

    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));

}

这是一个很好的视频，它解释了如果您感到迷茫，如何逐步完成所有事情。

Answer 2

如果您查看发布的第一个链接，它会显示方法。这是实现它的线路

window.alert = function(txt) {

        createCustomAlert(txt);

    }

这样做是将alert()函数变成您自己的自定义函数而不是默认函数。他们使用了一个单独的函数，createCustomAlert. 您需要创建自己的函数。

我只是style通过 JS设置警报属性的容器。而不是display:block;，使用display:none;。当然，还有其他方法可以实现这一点。下面是一个例子：

document.getElementById(‘container-id’).style = ‘display:none;’;

另一种方法是创建一个始终隐藏的类。当您想要切换隐藏警报时，您可以添加或删除此类。这需要 JavaScript，我看到你还没有使用它。