window窗口案例

最新推荐文章于 2024-10-11 17:39:47 发布

m0_57970861

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量109

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_57970861/article/details/127623604

版权

window.alert() 警告对话框

window.confirm() 确认对话框

window.prompt() 弹出提示对话框

html+css+javas页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert</title>
  <style>
      h1{
          text-align: center;
      }
    .mr-box {
      height:300px;
      width:400px;
        margin: 50px;
      background-color: pink;
        float: left;
    }
    .mr-item{
      margin:0px;
        font-size: 20px;
     width:100px;
    color: black;
    }
    .mr-info{
      margin:60px;
      text-align:right;
    }
  </style>
</head>
<body>
<div>
    <h1>常用对话框</h1>
</div>
<div class="mr-box">
  <span class="mr-item">警告alert</span>
   </br> </br> </br>
  <span class="mr-info">
    <button type="button" οnclick="mr_alert()">试一下</button>
  </span>
</div>
<div class="mr-box">
    <span class="mr-item">确定confirm</span></br></br> </br>
    <span class="mr-info">
    <button type="button" οnclick="mr_confirm()">试一下！</button>
  </span>
</div>
<div class="mr-box">
    <span class="mr-item">提示prompt</span></br></br> </br>
    <span class="mr-info">
    <button type="button" οnclick="mr_prompts()">试一下！</button>
  </span>
</div>
<div class="mr-box">
    <span class="mr-item">综合对话框</span></br></br> </br>
    <span class="mr-info">
    <button type="button" οnclick="mr_dialog()">试一下！</button>
  </span>
</div>
<script>
  function mr_alert(){
    window.alert("警告：支付成功！");
  }
</script>
<script>
  function mr_confirm(){
    window.confirm("询问：确定要买吗？");
  }
</script>
<script>
  function mr_prompts(){
    window.prompt("请输入邮寄地址”，");
  }
</script>
<script>
  function mr_dialog(){
    window.confirm("询问：确定要买吗？");
    window.prompt("请输入邮寄地址”，");
    window.alert("警告：支付成功！");
  }
</script>
</body>
</html>