popup

 英文直面意思是弹出，大概就是这个意思。比如点击添加按钮，弹出一个小的页面，添加完点提交后，添加的数据会填充到最开始的页面，然后弹出的页面也会自动关闭

实现这个功能需要三个页面，第一个页面是添加按钮和一个input框，比如；第二个页面是弹出的页面，里面有一个input框和一个提交按钮；第三个页面没有内容，是用来把添加的页面的数据提交到的第一个页面，并且关闭弹出的页面

需要用到三个方法，js中的，

　　1.windows.open(url,别名，参数）  //作用是打开一个页面

　　2.windows.opener.xxxxx()   其中xxxxx是函数，是定义在第一个页面中的函数

　　3.windows.close() 　　　　　　//作用是关闭窗口

 

视图函数：

def p1(request):
    return render(request,'p1.html')

def p2(request):
    if request.method == 'GET':
        return render(request,'p2.html')

    if request.method =="POST":
        obj = request.POST.get('test')
        return render(request,'p3.html',{"obj":obj})

 

模板文件

p1.html

<body>

    <input type="text" class="add-to-here" value="aasd">

    <button class="add" onclick="func()">添加</button>

<script>
    function func() {
        window.open('/p2','asf',"status=1,height:600,toolbar=0,resizeable=0")//参数是设置弹出的窗口的尺寸
    }

    function xxx(name) {
        ele = document.getElementsByClassName('add-to-here')[0];
        ele.value = name;
    }


</script>
</body>

p2.html

<body>
<form method="POST">
    {% csrf_token %}
    <input type="text" name="test">
    <input type="submit" value="提交">
</form>
</body>

p3.html

<body>
<script>
    (function () {
        var name = '{{ obj }}';
        window.opener.xxx(name);　　//执行p1.html中的xxx函数
        window.close();　　　　　　　　//关闭窗口
    })()

</script>
</body>

 

这就是一个简单的popup应用了

 

posted @ 2017-10-23 23:11  张璨  阅读(535)  评论(0)  编辑  收藏  举报