WebForm中的按钮事件调取js进行显示遮罩的操作_webform button弹遮罩层功能

作者：盐析白兔 | 2024-07-26 13:56:53

踩

webform button弹遮罩层功能

先看效果：

效果1：

效果2：

效果3：

效果4：

核心思想：本次核心思想为点击WebForm的按钮时候进行通过内置的事件进行 js 然后完成不同的js 操作以此来进行遮罩层的显示关闭

目标：点击按钮的时候，首先调取遮罩层，当事件执行完毕的时候关闭遮罩层。

代码如下：


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="测试webform调取js.Index"  %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script language="javascript">
        function doSubmit() 
        {
            //var s = window.confirm("确认要删除吗？");
            //bthShow();
　　        //return s;
        }
        function doSubmit2() {
          
            bthShow();
        }
        
    </script>
    <style type="text/css">
        /*遮罩*/
	    *{
		    margin: 0px;padding: 0px;
	    }
		#thisBG{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}  
		#showMask{display: none;  position: absolute;  top: 25%;  left: 23%;  width: 53%;  height: 49%;  padding: 8px;max-width:1000px;  background-color:white;   background-color: white;  z-index:1002;  overflow: auto;background:url("Img/c3d.gif")no-repeat center center ; background-color:white; }
        #showMaskbtn { float:right;display:none; }
        #MoveText { position: absolute; width:48%;height:60px; bottom:0px; transform:translateX(50%);   text-align:center; }
        </style>
	<script type="text/javascript">
	    function bthShow() {
	        //alert(1);
	        document.getElementById("thisBG").style.display = "block"; //背景显示
	        document.getElementById("showMask").style.display = "block"; //背景显示 
	        OpenSpeed();
	    }
	    function btnclose() {
	        //alert(1);
	        document.getElementById("thisBG").style.display = "none"; //隐藏显示
	        document.getElementById("showMask").style.display = "none"; //隐藏显示 
	    }
	    function OpenSpeed() {
	        var UploadSpeed = document.getElementById("UploadSpeed"); 
	        var i = 0;
	        var time = setInterval(task, 100);
	        function task() {
	            i++;
	            if (i > 100) {
	                i = 1;
	            }
	            UploadSpeed.innerText = i + "%";
 
	        }
	    }
	    function ThisClosedSpeed() {
	        var UploadSpeed = document.getElementById("UploadSpeed");
 
	    }
	    /*遮罩*/
	</script>
</head>
<body>
  
    <form id="form1" runat="server">
          <%--遮罩--%>
    <div id="thisBG" runat="server" ></div>
 
	<div id="showMask" runat="server" >
       
		<input runat="server" id="showMaskbtn" type="button" value="关闭遮罩" οnclick="btnclose();" />
        <div id="MoveText">
            <div>正在上传中请耐心等待</div>
            <div id="UploadSpeed" ></div>
        </div>
	</div>
    <%--遮罩--%>
        <div>
            <asp:Button ID="Button1" runat="server" Text="点我" OnClientClick="return doSubmit();" OnClick="Button1_Click" />
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            <asp:Literal ID="Literal2" runat="server"></asp:Literal>
            <asp:Literal ID="Literal3" runat="server"></asp:Literal>
        </div>
    </form>
</body>
</html>

下面是逻辑页面的代码


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace 测试webform调取js
{
    public partial class Index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void Button1_Click(object sender, EventArgs e)
        {
            Literal1.Text = "<script language='javascript'>alert('执行开始');doSubmit2();</script>";
            Literal2.Text = "<script language='javascript'>alert('删除进行');</script>";
            Literal3.Text = "<script language='javascript'>alert('删除完毕');btnclose();</script>";
 
        }
    }
}

备注声明，在这里需要3个不同的literal控件进行不同步骤的控制。

给按钮进行添加在按钮的OnClientClick事件添加上述函数（在按钮的属性里找到OnClientClick属性，添加return doSubmit();）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/885678