三种弹出框的js控制

最新推荐文章于 2024-09-14 18:52:56 发布

qq_30486009

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量680

点赞数 3

分类专栏： javascript 文章标签：对话框 javascript

本文链接：https://blog.csdn.net/qq_30486009/article/details/51741584

版权

javascript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

3种弹出框包括警告框，确认框，对话框；

1、警告框

<p>1、点击按钮，弹出警告框。</p>
<button id="alerts">警告框</button>
<script>
        $(function(){
            //1、警告框
            $("#alerts").click(function(){
                alert("这是警告框！！");
            });
    </script>

2、确认框

<p>2、点击按钮，显示确认框。</p>
<button id="open">确认框</button>
<p id="demo"></p>
<script>
        $(function(){
            //2、 confirm方法 确认框事件
            $("#open").click(function(){
                var x;
                var r = confirm("确定要删除吗？");
                if (r == true){
                    x = "你按下了\"确定\"按钮!";
                }else{
                    x = "你按下了\"取消\"按钮!";
                }
                $("#demo").html(x);
            });
    </script>

3、对话框

 <p>3、点击按钮弹出对话框</p>
 <button id="prom">对话框</button>
 <p id="resulte"></p>
 <script>
        $(function(){
            //3、对话框事件
            $("#prom").click(function(){
                var x;
                var person = prompt("请输入名字","Yony");
                if(person != null && person != ""){
                    x = "你好" + person + "欢迎来到web前端！";
                    $("#resulte").html(x);
                }
            });
   </script>