弹框

  1. alert()方法 
    警示对话框,要显示的信息放置在括号内,该对话框上包含一个“确认”按钮,用户阅读完所显示的信息后,只需单击该按钮就可以关闭对话框。
<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //JavaScript脚本标注
alert("上联:山石岩下古木枯");//在页面上弹出上联
alert("下联:白水泉边少女妙");//在页面上弹出下联
</script>
</head>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这里写图片描述

2 confirm()方法

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var con;
con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框
if(con==true)alert("非常喜欢!");
else alert("不喜欢!");
</script>
</head>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

这里写图片描述 
这里写图片描述 
这里写图片描述

3 promot()方法

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var name,age;
name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框,
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
</script>
</head>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

这里写图片描述 
这里写图片描述

4 弹层

<script type="text/javascript">
var a = '<div class="bg-model" style="top: 0%; left: 0%; background: rgba(0, 0, 0, 0.3);  100%; height: 100%; position: fixed; z-index: 9999; opacity: 1; display: none;"><div class="content " style="position: absolute;left: 40%;top: 25%;border-radius: 8px; 20%;height: 20%;"><div><div id="bg-button" style="float:right;margin-right:5px;cursor: pointer;">X</div></div><p style="font-size:20px;margin-top:55px;font-family: initial;"></p></div></div>';
$('.box').append(a);
$('#bg-button').bind('click',function(){
    $(".bg-model").hide();
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
function  recover(id)
{
    $(".bg-model p").text(id+' 修复中')
    $(".bg-model").fadeTo(300,1)

    var items = document.getElementById("rec");
    items.disabled = true; 
    $.ajax({
        url:'/sections/recover/'+id,
        method:'POST',
        success:function(data){
            var s = eval('('+data+')');
            if(s.msg=='succeed')
            {   
                $(".bg-model p").text(id+' 已修复')
                $(".bg-model").fadeTo(300,1)
                items.disabled = false;
            }else {     
                $(".bg-model p").text(s.msg)
                $(".bg-model").fadeTo(300,1)
                items.disabled = false;
            }
        }
    });
}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
<td>
        <?php if ($list['xes_sections']['status']==1):?>
        <a href="/sections/edit/<?php echo $list['xes_sections']['id']?>">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="/sections/freeze/<?php echo $list['xes_sections']['id']?>">冻结</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="rec" value="修复" onclick="recover(<?php echo $list['xes_sections']['id']?>)">
        <?php endif;?>
        <?php if ($list['xes_sections']['status']==2):?>
        编辑&nbsp;&nbsp;&nbsp;&nbsp;冻结&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="rec" value="修复" onclick="recover(<?php echo $list['xes_sections']['id']?>)">
        <?php endif;?>
        <?php if ($list['xes_sections']['status']==3):?>
        <a href="/sections/edit/<?php echo $list['xes_sections']['id']?>">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="/sections/unfreeze/<?php echo $list['xes_sections']['id']?>">解冻</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="rec" value="修复" onclick="recover(<?php echo $list['xes_sections']['id']?>)">
        <?php endif;?>
        </td>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

这里写图片描述

原文地址:https://www.cnblogs.com/guagua-join-1/p/8951068.html