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

Question

我受到这个线程JsFiddle的启发，用 css 设计创建 javascript alert()但我试图在 Mac OS 设计中执行此警报，但我无法实现这一点。

它将为您提供帮助，我如何在警报中转换我的代码，以便当我在 Javascript 或 jQuery 中运行alert('{MY_Content}')时，它将在我的设计中显示如下JsFiddle ：

我的代码在 Mac Design 中显示的下方，这是我的JSFiddle ：

你会很好地帮助我，请帮助.. :(

 .window.warning { width: 400px; left: 50%; top: 15%; margin: 0px 0 0 -200px; display: none; z-index: 999; }.window.windows-vis { visibility: visible; opacity: 1; }.window { background: -webkit-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #EDEDED, #EDEDED 23px); background: -moz-linear-gradient(rgba(233, 233, 233, 1.0), rgba(178, 178, 178, 1.0) 21px, #EDEDED, #EDEDED 23px); border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 22px 70px 4px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(0, 0, 0, 0.3); text-align: left; position: absolute; z-index: 0; visibility: hidden; opacity: 0; }.tab { height: 21px; } nav.control-window { position: absolute; left: 5px; top: 3px; z-index: 10; height: 19px; } nav.control-window a.close { background: #FD4E4E; } nav.control-window a { display: inline-block; margin: 2px 0px 3px 1px; width: 12px; height: 12px; border-radius: 100%; box-shadow: 0px 1px 0px rgba(255, 255, 255, .5); text-indent: -9999px; position: relative; } nav.control-window a:before { content: ''; display: block; position: absolute; border-radius: 100%; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .8); top: 0px; left: 0px; bottom: 0px; right: 0px; } nav.control-window a:after { content: ''; display: block; position: absolute; top: 2px; left: 1px; bottom: 1px; right: 1px; border-radius: 100%; background: -webkit-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7)); background: -moz-linear-gradient(white, rgba(255, 255, 255, .9) 2%, white, rgba(255, 255, 255, .4) 16%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, .74), rgba(255, 255, 255, .7) 122%, rgba(255, 255, 255, .7)); box-shadow: inset 0px -3px -5px 3px rgba(255, 255, 255, 0.2), inset 0px 2px -5px 3px rgba(255, 255, 255, 0.2); } nav.control-window a.minimize { background: #F3BB55; } nav.control-window a { display: inline-block; margin: 2px 0px 3px 1px; width: 12px; height: 12px; border-radius: 100%; box-shadow: 0px 1px 0px rgba(255, 255, 255, .5); text-indent: -9999px; position: relative; } nav.control-window a.maximize { background: #96D16F; } nav.control-window a { display: inline-block; margin: 2px 0px 3px 1px; width: 12px; height: 12px; border-radius: 100%; box-shadow: 0px 1px 0px rgba(255, 255, 255, .5); text-indent: -9999px; position: relative; } h1.titleInside { position: relative; z-index: 2; color: #3c3c3c; font-size: 13px; line-height: 21px; text-decoration: none; text-shadow: 0 1px 1px #e7e7e7; text-align: center; text-transform: capitalize; }.container { position: relative; border-top: 1px solid #656565; }.container-alert img { float: left; }.container-alert { padding: 15px 20px; position: relative; }.about-alert { width: 295px; position: relative; top: 5px; display: inline-block; line-height: 15px; margin-left: 15px; }.about-alert p { font-size: 10px; margin-top: 5px; line-height: 14px; } a.button.blink { height: 19px; line-height: 19px; font-size: 12px; text-align: center; float: right; margin: 10px 0 10px 15px; padding: 0 20px; box-shadow: inset 0 19px 0 rgba(0, 115, 215, 0.3), inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 0 rgba(0, 0, 0, 0.09); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #D3F7FD), color-stop(0.5, #87C5FB), color-stop(0.5, #A1D1F9), color-stop(1, #D4E9FC)); background-image: -moz-linear-gradient( center bottom, #D3F7FD 0%, #87C5FB 50%, #A1D1F9 50%, #D4E9FC 100%); border-top-color: #5a5caf; border-bottom-color: #52536f; border-left-color: #56578f; border-right-color: #56578f; -webkit-animation: blinking 1s infinite ease-in-out; -moz-animation: blinking 1s infinite ease-in-out; } a.button { display: inline-block; height: 16px; line-height: 16px; font-size: 11px; border-radius: 4px; border: 1px solid #9a9a9a; text-decoration: none; font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: normal; color: #000; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.09); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EBEBEB), color-stop(0.5, #ECECEC), color-stop(0.5, #F3F3F3), color-stop(1, #FFFFFF)); background-image: -moz-linear-gradient( center bottom, #EBEBEB 0%, #ECECEC 50%, #F3F3F3 50%, #FFFFFF 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 0 rgba(0, 0, 0, 0.09); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

 <div id="warning" class="window warning ui-draggable windows-vis" style="display: block;"> <div class="tab"></div> <nav class="control-window"> <a href="#" class="close">close</a> <a href="#" class="minimize">minimize</a> <a href="#" class="maximize">maximize</a> </nav> <h1 class="titleInside">Share This</h1> <div class="container"> <div class="container-alert"> <img src="http://www.alessioatzeni.com/mac-osx-lion-css3/res/img/Alert.png" alt="alert"> <div class="about-alert"> <h2>Alert</h2> <p>This application cannot be used in this version</p> <a href="#warning" class="button blink" data-rel="close">Close</a> </div> </div> </div> </div>

Answer 1

如果您查看发布的第一个链接，它会显示如何。 这是使它发生的线

window.alert = function(txt) {
        createCustomAlert(txt);
    }

这样做是将alert() function 变为您自己的自定义 function 而不是默认值。 他们使用了单独的 function， createCustomAlert 。 您需要创建自己的 function。

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

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

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

Answer 2

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

window.alert = myAlertFunction

您将创建一个 function '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去掉alert

function removeCustomAlert() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}

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