实现popup弹窗

以Django框架为基础，实现的popup弹窗，简单代码如下：

# 路由系统
url(r'^test/', views.test),
url(r'^add_test/', views.add_test),

# 视图函数
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
# from django.forms import ModelForm
# from django.forms import fields
# from django.forms import widgets
#
# class TestForm(ModelForm):
#     class Meta:
#         pass

def test(request):
    user_group_list = models.UserGroup.objects.all()

    return render(request,"test.html",{"user_group_list":user_group_list})

def add_test(request):

    if request.method == "GET":
        return render(request,"add_test.html")

    else:
        popid = request.GET.get("popup")
        title = request.POST.get("title")
        if popid:
            obj = models.UserGroup.objects.create(title=title)
            return render(request,"popup_response.html",{"id":obj.id,"title":obj.title,"popid":popid})
        else:
            models.UserGroup.objects.create(title=title)
            return HttpResponse("重定向！")
views.py
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>用户名：<input type="text"></p>
<p>用户组：<select  id="ugID">
    {% for foo in user_group_list %}
        <option value="{{ foo.pk }}">{{ foo.title }}</option>
    {% endfor %}
</select><a href="" onclick="popupUrl('/add_test/?popup=ugID')">添加</a>
</p>
<script>
    function popupUrl(url) {
        window.open(url,"x1","status=1,height:500,width:600,toolbar=0,resizeable=0");
    }

    function popupCallBack(popid,opid,optext) {
        var tag = document.createElement("option");
        tag.innerHTML = optext;
        tag.setAttribute("value",opid);
        tag.setAttribute("selected","selected");

        document.getElementById(popid).appendChild(tag);
    }

</script>

</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //将数据传送给发起popup的页面
    opener.popupCallBack("{{ popid }}","{{ id }}","{{ title }}");
    window.close();
</script>
</body>
</html>
popup_response.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="POST">
    {% csrf_token %}
    <input name="title" type="text">
    <input type="submit" value="提交">
</form>
</body>
</html>
add_test.html

 

posted @ 2017-10-01 21:47  细雨蓝枫  阅读(390)  评论(0)  编辑  收藏  举报