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

来源：互联网发布：spark sql 数据仓库编辑：程序博客网时间：2024/06/05 00:30

背景

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

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

爱，笔者对前端的东西不太熟悉，最拿手的就是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>

虽然丑点，但是功能完成啦，剩下的再改改样式就好看了哈。

阅读全文

0 0