前端div的弹出，html弹窗思路

最新推荐文章于 2024-08-11 00:51:52 发布

Fanstorm丶

最新推荐文章于 2024-08-11 00:51:52 发布

阅读量2.1w

点赞数 9

分类专栏： Web前端文章标签： html css 前端弹窗弹出div

本文链接：https://blog.csdn.net/wf824284257/article/details/75804142

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

背景

这是笔者实习的第三周，领导交给笔者一个这样的任务：

原：页面最下面有个按钮，点击后跳转到指定的页面。
新：点击该按钮后，弹窗，上面带两个单选按钮，然后根据用户的选择跳转到不同的页面。

爱，笔者对前端的东西不太熟悉，最拿手的就是winform了，心想winform做这个简单啊- -，但现在要用html css js 来实现。

恰好这几天学了点英语，顺便挂一句：

Problems are not stop signs.They are guidelines.

实验准备

打开vs，新建一个web.net 空项目。添加一个webform，名为Index。

为了让网页长(chang)一点，我们在form里写一段js

<script>
    for(var i=0;i<100;i++)
    {
        document.write("<p>这是一个 p </p>");
    }
</script>

这样我们在网页上放了100个p，然后最下面是一个前端按钮

<input id="btnSelect" type="button" value="button" />

添加一个窗体new1，然后写一段js，点击Index.aspx的btnSelect时，跳转到new1

<script>
    function oldJump() {
        location = "new1.aspx";
    }
</script>

<input id="btnSelect" type="button" value="button" onclick="oldJump()"/>

好了，原本的网页就算是做好了，把完整代码放上来：

<!--Index.aspx-->

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="divdiv.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>
        function oldJump() {
            location = "new1.aspx";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <script>
        for(var i=0;i<100;i++)
        {
            document.write("<p>这是一个 p </p>");
        }
    </script>
    <input id="btnSelect" type="button" value="button" onclick="oldJump()"/>
    </form>
</body>
</html>

现在为了模拟我们的任务，我们先添加一个页面new2.aspx.

现在，我们的任务就是：

点击Index上的selectBtn后，弹窗两个单选按钮(new1,new2),根据用户的选择，跳转到对应的页面。

好了，准备结束，实验开始！

实验思路

目的是弹窗带两个单选按钮。直接在页面做出来一个框里面有单选按钮还是蛮简单的对吧，那后面就好说了，就是通过js来控制它的显示和隐藏就可以实现弹窗的效果了！我们来试试吧。

实验进行

首先添加两个div，里面放上我们需要的东西

<div id="selectBox" >
    <p>请选择跳转的页面：</p>
    <p><input name="new" id="Radio1" value="new1" type="radio" />new1</p>
    <p><input name="new" id="Radio2" value="new2" type="radio" />new2</p>
    <a >OK</a>&nbsp;&nbsp;&nbsp;<a>Cancel</a>
</div>
<div id="shelter"></div>

欸，可以看到他们的id很有意思，内容也很有意思。通过id大家可以猜到了吧，selectBox就是我们的弹窗，而shelter是为了将页面给遮盖起来，同时，还要注意selectBox要显示在shelter之上，怎么做呢？

首先，这是弹窗吗，所以刚开始是隐藏的，我们写css

<style>
    div.selectBox{display:none}
    div.shelter{display:none}
</style>

并且绑定给两个div的class

<div id="selectBox" class="selectBox">
<div id="shelter" class="selectBox"></div>

这样这两个div就隐藏了。

下面，点击btnselect时，要显示这两个div，所以写js：

function showSelectBox() {
        document.getElementById("selectBox").style.display = "block";
        document.getElementById("shelter").style.display = "block";
    }

并且绑定给btnselect

到这里，我们打开页面时，两个div是不存在的，点击按钮后，两个div在最下方蹦出来。

这不是我们想要的效果。我们需要的是弹窗。怎么做。

对了，我们可以固定selectBox的位置，让其永远显示在屏幕最中间。同时设置该div的长宽和border，让他看起来更像一个弹窗。

    div.selectBox{display:none;position:fixed;top:30%;left:30%;width:300px;height:200px;border:3px solid black}

这样的话，点击btnselect后，就会简单的弹窗了，貌似差不多了哈。

那shelter的这个div是做什么的呢？大家应该发现了，刚刚虽然可以弹窗了，但是弹窗后仍然可以对网页其他元素进行操作，这貌似不太符合我们的要求，所以shelter就是为了在弹窗时屏蔽掉其他元素的。

设置shelter占满整个网页，同时保证selectBox在shelter之上。

div.selectBox{display:none;position:fixed;top:30%;left:30%;width:300px;height:200px;border:3px solid black;background-color:white;z-index:1002}
div.shelter{display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:black;opacity:0.6;z-index:1001}

做完这个，弹窗的显示部分就结束啦，需要更好看的话就再调整css吧。

接下来就是selectBox中的 OK和Cancel按钮。点击OK时，若没选单选按钮，则提示用户选择；否则根据选择的单选按钮跳转到不同的页面。点击Cancel时，关闭弹窗，即将两个div隐藏。

function cancel() {
    document.getElementById("selectBox").style.display = "none";
    document.getElementById("shelter").style.display = "none";
}
function ok() {
    var radios = document.getElementsByName("new");
    for(var i=0;i<radios.length;i++)
    {
        if(radios[i].checked)
        {
            location = radios[i].value + ".aspx";
            return true;
        }
    }
    alert("请选择");
    return false;
}


<a onclick="ok()">OK</a>&nbsp;&nbsp;&nbsp;<a onclick="cancel()">Cancel</a>

这样就完成啦。

完整代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="divdiv.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>
    <style>
        div.selectBox{display:none;position:fixed;top:30%;left:30%;width:300px;height:200px;border:3px solid black;background-color:white;z-index:1002}
        div.shelter{display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:black;opacity:0.6;z-index:1001}
    </style>
    <script>
        function oldJump() {
            location = "new1.aspx";
        }
        function showSelectBox() {
            document.getElementById("selectBox").style.display = "block";
            document.getElementById("shelter").style.display = "block";
        }
        function cancel() {
            document.getElementById("selectBox").style.display = "none";
            document.getElementById("shelter").style.display = "none";
        }
        function ok() {
            var radios = document.getElementsByName("new");
            for(var i=0;i<radios.length;i++)
            {
                if(radios[i].checked)
                {
                    location = radios[i].value + ".aspx";
                    return true;
                }
            }
            alert("请选择");
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <script>
        for(var i=0;i<100;i++)
        {
            document.write("<p>这是一个 p </p>");
        }
    </script>
    <input id="btnSelect" type="button" value="button" onclick="showSelectBox()"/>


    <div id="selectBox" class="selectBox">
        <p>请选择跳转的页面：</p>
        <p><input name="new" id="Radio1" value="new1" type="radio" />new1</p>
        <p><input name="new" id="Radio2" value="new2" type="radio" />new2</p>
        <a onclick="ok()">OK</a>&nbsp;&nbsp;&nbsp;<a onclick="cancel()">Cancel</a>
    </div>
    <div id="shelter" class="shelter"></div>

    </form>
</body>
</html>