弹窗提示框关闭及页面局部刷新

本文介绍了一种在网页中实现局部刷新和定时更新的方法,通过使用JavaScript和jQuery库,可以针对特定元素进行实时数据更新,避免了整个页面的重新加载,提高了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

设置d4局部刷新

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layer-更懂你的web弹窗解决方案</title>

  <style>
      .box1{width: 200px;height: 100px;background: #ccc}
      .box2{width: 200px;height: 100px;background: #ccc}
      .left1{width: 100px;height: 100px;float: left;background: orange}
      .right1{width: 100px;height: 100px;float: right;background: green}
      .left2{width: 100px;height: 100px;float: left;background: pink}
      .right2{width: 100px;height: 100px;float: right;background: purple}
  </style>
  
  <script src="layer/jquery-1.11.3.min.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>
<div class="box1">
    <div class="left1" οnclick="d1()">1</div>
    <div class="right1" οnclick="d2()">2</div>
</div><br>
<div class="box2">
    <div class="left2" οnclick="d3()">3</div>
    <div class="right2" οnclick="d4()">4</div>
</div>
<script>
    function d1() {
        layer.open({
            title: '在线调试'
            ,content: '姓名:<input type="text"><br>' +
            '年龄:<input type="text"><br>' +
            '毕业学院:<input type="text"><br>' +
            '工作单位:<input type="text"><br>' +
            '爱好:<input type="text"><br>'

        });
    }
    function d2() {
        layer.confirm('姓名:<input type="text"><br>' +
            '年龄:<input type="text"><br>' +
            '姓名:<input type="text"><br>' +
            '年龄:<input type="text"><br>' +
            '姓名:<input type="text"><br>' +
            '年龄:<input type="text"><br>' +
            '姓名:<input type="text"><br>' +
            '年龄:<input type="text"><br>', function(index){
            //do something
            layer.confirm('是否确认提交?', function(index){
                //do something
                layer.close(index);
            });
        });
    }

//window.parent.location.reload('.box');
    // window.parent.location.reload();

    // var index = parent.layer.getFrameIndex(window.name);
    // parent.layer.close(index);

</script>
<script>
    function d3() {
            layer.prompt({
                formType: 2,
                value:'测试',
                title: '请填写信息',
                area: ['800px', '350px'] //自定义文本域宽高
            }, function(value, index, elem){
                confirm("确认输出吗?"+value); //得到value
                layer.close(index);
            });

    }
    function d4() {
        layer.confirm("请问是否确定删除,删除后不可恢复?", {
            content:'name:<input type="text"><br>' +
                    'name:<input type="text"><br>' +
                    'name:<input type="text"><br>' +
                    'name:<input type="text"><br>' +
                    'name:<input type="text"><br>',
            btn: ["确定","取消"] //按钮
        }, function(){
            confirm('确定吗?');
            layer.closeAll('dialog');
        }, function(){

        });
    }
    // window.parent.location.reload();

    //setTimeout('self.loc ation.reload();',1000);

   //页面局部刷新
    var refreshTime = "500";// 页面数据刷新定时单位为ms
    $(document).ready(function() {
        var i = 0;
        $(function() {
            /*
             * 页面定时器代码……
             */
            setInterval(function() {
                $(".right2").load(location.href + " .right2");// 注意后面DIV的ID前面的空格,很重要!没有空格的话,会出双眼皮!(也可以使用类名)
            }, refreshTime);
        });
    });

</script>
</body>
</html>

 

 

页面刷新

<h1 id="test">框架内页面123</h1>
<button onclick="fresh()">框架内刷新</button>

<script>

    setInterval(test, 1000);
    function fresh(){
        // 框架内页面刷新:可实现局部刷新与整个页面重定向
        self.location.reload();  //刷新框架内页面
        // window.parent.location.href='http://koushuling.top'; //页面重定向
    }
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值