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

背景

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

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

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

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

Problems are not stop signs.They are guidelines.

实验准备

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

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

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

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

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="divdiv.Index" %>






    
    


    

    
    
    

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

现在，我们的任务就是：

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

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

实验思路

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

实验进行

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

    
请选择跳转的页面：
    
new1
    
new2
    OK   Cancel

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

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

并且绑定给两个div的class

这样这两个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;iOK   Cancel

这样就完成啦。

完整代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="divdiv.Index" %>






    
    
    



    

    
    


    

        
请选择跳转的页面：
        
new1
        
new2
        OK   Cancel
    
    


    

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