弹窗付款图片的HTML和JavaScript代码 - 小武站
管理员 系统 关注 创始人 10级
发表于NEW版块 原创

弹窗付款图片的HTML和JavaScript代码

以下是一个简单的弹窗付款图片的HTML和JavaScript代码示例:


```html

<!DOCTYPE html>

<html>

<head>

 <title>弹窗付款图片</title>

 <style type="text/css">

  #pay-modal {

   display: none;

   position: fixed;

   z-index: 1;

   left: 0;

   top: 0;

   width: 100%;

   height: 100%;

   overflow: auto;

   background-color: rgba(0,0,0,0.4);

  }

  #pay-modal-content {

   background-color: #fefefe;

   margin: 15% auto;

   padding: 20px;

   border: 1px solid #888;

   width: 80%;

   max-width: 600px;

  }

 </style>

</head>

<body>

 <button onclick="showPayModal()">点击付款</button>

 <div id="pay-modal" class="hide">

  <div id="pay-modal-content">

   <h2>请选择支付方式</h2>

   <img src="https://via.placeholder.com/300x200" alt="支付图片">

  </div>

 </div>

 <script type="text/javascript">

  function showPayModal() {

   var modal = document.getElementById("pay-modal");

   modal.style.display = "block";

   setTimeout(function() { modal.className = "show"; }, 20);

   setTimeout(function() { modal.className = "hide"; }, (Math.random() * 3000) + 1000); // 让弹窗有动画效果,随机显示时间在1秒到4秒之间

  };

 </script>

</body>

</html>

```


将上述代码保存为一个HTML文件,然后在浏览器中打开即可看到一个简单的弹窗付款图片。你可以根据需要修改样式、图片、内容等。

福建,厦门,集美区

已有0次打赏
(0) 分享
分享

请保存二维码或复制链接进行分享

取消