1

I am inspired by this thread JsFiddle to create javascript alert() with css design but I am trying to do this alert in Mac OS design, but I couldn't achieve this.

It will your kind help help , How I convert my code in alert so that when I run alert('{MY_Content}') in Javascript or jQuery it will show in my design as like this JsFiddle:

My Code is below which show in Mac Design and here is my JSFiddle :

It will your so kind to help me, Please help.. :(

.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>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
John Cart
  • 69
  • 8
  • Do what they did. Set `window.alert` to a custom function. Should look like `window.alert = function(){}`. This overrides the default alert and replaces it – AlexH Oct 19 '19 at 03:31
  • You can follow this example of custom popup : [w3schools - howto js popup](https://www.w3schools.com/howto/howto_js_popup.asp) – Shim-Sao Oct 19 '19 at 03:39
  • @Shim-Sao This is normal popup or tooltip and I would to do this in JS when I user `alert()` this will show my code instead default alert looks – John Cart Oct 19 '19 at 03:43
  • Styling default alert is not possible, all you can do is to override the `window.alert`. If you search a little, it's a duplicated question with all JSFiddle you want: [how-to-change-the-style-of-alert-box](https://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box). – Shim-Sao Oct 19 '19 at 13:31

2 Answers2

0

If you look at the first link posted, it shows how. Here’s the line that makes it happen

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

What this does is make the alert() function into your own custom function instead of the default. They used a separate function, createCustomAlert. You’ll want to create your own function.

I would just set the container of the alert’s style property through JS. Instead of display:block;, use display:none;. There are other ways to accomplish this, of course. Here’s an example:

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

Another way is to create a class that is always hidden. You would then add or remove this class when you would like to toggle hiding the alert. This requires JavaScript, which I see you’re not yet using.

AlexH
  • 828
  • 7
  • 26
0

You need to create a JS file as well. Your JS file will contain your custom alert function. And you will override the default alert function by the line

window.alert = myAlertFunction

And you would create a function 'myAlertFunction' which would have one parameter, which would be the text to be displayed in the alert.

You can just use the one in the first JSFiddle if you want.

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";

}

Finally, a small function to remove the alert

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

This is a good video which explains how to do everything step by step if you are feeling lost.

Sanil Khurana
  • 1,129
  • 9
  • 20
  • thanks you sir, but this is not working when I run this in JsFiiddle please have a look here [jsFiddle](https://jsfiddle.net/techWorld/0ex8ym5j/1/) – John Cart Oct 19 '19 at 04:24