如何将Mac OS风格自定义弹窗转为可调用的JS alert()方法？

Got it, let's get your custom Mac-style alert working when you call alert('your content')! The main issue is that the native browser alert() doesn't know about your custom popup—we need to override that function, plus add dynamic content handling and proper show/hide logic.

Here's the revised code with all fixes included:

1. Updated HTML #

We'll add an ID to the content paragraph so we can dynamically update it, and set the popup to be hidden by default:

<div id="warning" class="window warning ui-draggable" style="display: none;">
  <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">Alert</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 id="alert-content">This application cannot be used in this version</p>
        <a href="#warning" class="button blink" data-rel="close">Close</a>
      </div>
    </div>
  </div>
</div>

2. Cleaned-Up CSS (Visuals Unchanged) #

I removed duplicate styles for nav.control-window a to keep the code tidy, plus added a smooth fade transition for better UX:

.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; 
  transition: visibility 0s, opacity 0.3s ease; /* Smooth fade effect */
} 
.tab { height: 21px; } 
nav.control-window { 
  position: absolute; 
  left: 5px; 
  top: 3px; 
  z-index: 10; 
  height: 19px; 
} 
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.close { background: #FD4E4E; } 
nav.control-window a.minimize { background: #F3BB55; } 
nav.control-window a.maximize { background: #96D16F; } 
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); 
} 
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; 
}

3. JavaScript (Choose Native or jQuery) #

Native JavaScript Version #

// Override native alert function
window.alert = function(message) {
  // Update popup content with your custom message
  document.getElementById('alert-content').textContent = message;
  // Show the Mac-style popup
  const popup = document.getElementById('warning');
  popup.style.display = 'block';
  popup.classList.add('windows-vis');
};

// Handle close actions (red circle or Close button)
document.addEventListener('click', function(e) {
  if (e.target.matches('.close, .button[data-rel="close"]')) {
    e.preventDefault();
    const popup = document.getElementById('warning');
    popup.style.display = 'none';
    popup.classList.remove('windows-vis');
  }
});

jQuery Version #

// Override native alert function
window.alert = function(message) {
  // Update popup content with your custom message
  $('#alert-content').text(message);
  // Show the Mac-style popup
  $('#warning').show().addClass('windows-vis');
};

// Handle close actions (red circle or Close button)
$(document).on('click', '.close, .button[data-rel="close"]', function(e) {
  e.preventDefault();
  $('#warning').hide().removeClass('windows-vis');
});

How It Works Now #

• When you call alert('Your custom message here'), the native function is replaced with our code that updates the popup content and shows your Mac-style window.
• Clicking either the red close circle or the "Close" button hides the popup smoothly.
• The added CSS transition makes the show/hide feel more polished, matching Mac's native behavior.

内容的提问来源于stack exchange，提问作者John Cart