请求修改JavaScript自定义Alert弹窗：添加双按钮与RTL文本对齐

没问题，我帮你把这个自定义弹窗改成你需要的样子——添加「关闭」和「打开优惠」两个按钮、切换成RTL从右到左排版，并且设置30秒后自动弹出。下面是修改后的完整代码，我还会说明关键的改动点：

修改后的完整代码 #

HTML 部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='customAlert'>
  <p class='message'></p>
  <div class="button-container">
    <input type='button' class='closeButton' value='关闭'>
    <input type='button' class='openOfferButton' value='打开优惠'>
  </div>
</div>
<input type='button' class='rab' value='手动触发弹窗'>

CSS 部分

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body{
  background: darken(#04B486, 30%);
  font-family: 'Noto Sans', 'Helvetica';
}
.customAlert{
  display: none;
  position: fixed;
  max-width: 25%;
  min-width: 250px !important;
  min-height: 20%;
  height: 200px;
  left: 50%;
  top: 50%;
  padding: 10px;
  box-sizing: border-box;
  margin-left: -12.5%;
  margin-top: -5.2%;
  background: #088A68;
  /* 开启RTL文本方向 */
  direction: rtl;
  
  @media all and (max-width: 1300px){
    .message{
      font-size: 14px !important;
    }
    .button-container input[type='button']{
      height: 30px !important;
      font-size: 12px;
    }
  }
  
  .message{
    padding: 5px;
    color: white;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    /* 继承RTL方向 */
    direction: inherit;
  }
  
  .button-container{
    position: absolute;
    bottom: 10px;
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
  }
  
  input[type='button']{
    width: 48%;
    height: 36px;
    outline: 0;
    border: 0;
    background: #04B486;
    color: white;
    
    &:hover{
      transition: 0.3s;
      cursor: pointer;
      background: lighten(#04B486, 5%);
    }
  }
}
.rab{
  width: 200px;
  height: 30px;
  outline: 0;
  border: 0;
  color: white;
  background: darken(#04B486, 5%);
}
@keyframes fadeOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}
@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

JavaScript 部分

var currentCloseCallback;
var currentOpenOfferCallback;

// 重写alert函数，支持传入关闭和打开优惠的回调
window.alert = function(msg, closeCallback, openOfferCallback){
  $('.message').text(msg);
  $('.customAlert').css('animation', 'fadeIn 0.3s linear');
  $('.customAlert').css('display', 'inline');
  
  setTimeout(function(){
    $('.customAlert').css('animation', 'none');
  }, 300);
  
  currentCloseCallback = closeCallback || function(){};
  currentOpenOfferCallback = openOfferCallback || function(){};
}

$(function(){
  // 关闭按钮点击事件
  $('.closeButton').click(function(){
    $('.customAlert').css('animation', 'fadeOut 0.3s linear');
    setTimeout(function(){
      $('.customAlert').css('animation', 'none');
      $('.customAlert').css('display', 'none');
      currentCloseCallback();
    }, 300);
  })
  
  // 打开优惠按钮点击事件
  $('.openOfferButton').click(function(){
    $('.customAlert').css('animation', 'fadeOut 0.3s linear');
    setTimeout(function(){
      $('.customAlert').css('animation', 'none');
      $('.customAlert').css('display', 'none');
      currentOpenOfferCallback();
    }, 300);
  })
  
  // 手动触发测试按钮
  $('.rab').click(function(){
    alert("限时优惠：全场商品8折，仅限今日！", 
      function(){
        console.log("用户点击了关闭按钮");
      },
      function(){
        console.log("用户点击了打开优惠按钮");
        // 这里可以添加打开优惠页面的逻辑，比如：
        // window.location.href = "/your-offer-page";
      }
    );
  });
  
  // 30秒后自动弹出优惠弹窗
  setTimeout(function(){
    alert("限时优惠：全场商品8折，仅限今日！", 
      function(){
        console.log("用户关闭了优惠弹窗");
      },
      function(){
        console.log("用户打开了优惠");
        // 替换成你的优惠页面链接
        // window.location.href = "/your-offer-page";
      }
    );
  }, 30000); // 30000毫秒 = 30秒
});

关键改动说明 #

1. HTML结构调整

   • 新增了.button-container容器放置两个按钮，让布局更规整
   • 替换原单个按钮为「关闭」和「打开优惠」按钮，分别添加类名方便绑定事件

2. CSS RTL适配

   • 在.customAlert上添加direction: rtl;，让整个弹窗遵循从右到左的排版规则
   • 使用Flex布局实现两个按钮的并排排列，适配RTL的视觉习惯
   • 调整按钮定位逻辑，从原绝对定位居中改为固定在弹窗底部，提升响应式表现

3. JavaScript功能扩展

   • 扩展了window.alert函数，支持传入关闭按钮和打开优惠按钮的独立回调函数
   • 修改自动弹窗触发时间为30秒（30000毫秒），符合你的需求
   • 给两个按钮分别绑定点击事件：关闭按钮仅隐藏弹窗；打开优惠按钮隐藏弹窗后可执行跳转优惠页面等自定义逻辑（示例中预留了代码位置）

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