利用js實現popup彈窗
簡單實現一個通過一個網頁，點擊生成一個彈窗，然後點擊保存之後自動關閉彈窗的功能。
首先在settings文件中寫上兩條對應的路由關系。
1 urlpatterns = [ 2 url(r‘^p1/‘, p1), 3 url(r‘^p2/‘, p2), 4 ]
我們可以肯定的是我們需要一個網頁，然後彈出另一個網頁，所以我們還需要兩個視圖函數。
1 def p1(request): 2 return render(request,‘p1.html‘)
如上代碼，我們先寫一個視圖函數，緊接著我們配一個對應的p1.html文件：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <h1>p1頁面</h1> 10 <select id="i1"> 11 <option>上海</option> 12 <option>北京</option> 13 </select> 14 <input type="button" value="添加" onclick="popupFunc();" /> 15 16 <script> 17 function popupFunc() { 18 window.open(‘/p2/‘,‘asdfadf‘,"status=1, height:500, width:600, toolbar=0, resizeable=0") 19 } 20 21 function backFunc(name) {22 var op = document.createElement(‘option‘); 23 op.innerHTML = name; 24 op.setAttribute(‘selected‘,‘selected‘); 25 document.getElementById(‘i1‘).appendChild(op); 26 } 27 </script> 28 29 </body> 30 </html>
現在我解釋一下上面的html代碼，首先我創建一個select標簽，id為i1;然後創建一個button按鈕，綁定了一個popupFunc的事件。
接著script代碼就是，觸發的popupFunc()函數，
然後通過window.open打開一個新的窗口，參數第一個是要跳轉的url，第二個參數可以寫一個url別名，避免多個的時候會有混淆，接著就可以配置樣式了。
再後面backFunc(name)函數是當新彈出的窗口提交數據並關閉之後，本窗口接收數據之後做的操作，新建一個option,賦值，添加到select中，結束。
接下來我們配置新窗口的視圖函數。
1 def p2(request): 2 if request.method == "GET": #獲取頁面的GET請求 3 return render(request,‘p2.html‘) #返回p2.html 4 elif request.method == "POST": 5 # 提交數據的POST請求，在數據庫中增加 6 from app01 import models 7 obj = models.UserGroup.objects.create(title=request.POST.get(‘city‘)) #出電腦數據庫的一格UserGroup表中。 8 return render(request,‘popup_response.html‘,{‘obj‘:obj}) #最後跳轉到一個新的頁面，並傳參。
然後創建p2.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <form method="POST"> 10 {% csrf_token %} 11 <input type="text" name="city" /> 12 <input type="submit" value="提交" /> 13 </form> 14 </body> 15 </html>
一個Input框 輸入內容，一個提交按鈕通過views提交數據庫，並傳參給另一個頁面。註意POST請求需要{% csrf_token %}
最後我們接下來創建那個popup_response.html頁面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正在返回</title> 6 7 </head> 8 <body> 9 <script> 10 (function () { 11 var name = "{{ obj.title }}"; 12 window.opener.backFunc(name); 13 window.close(); 14 })() 15 </script> 16 </body> 17 </html>
該頁面實際上顯示一瞬間就關閉了，具體邏輯就是，當p2.html提交之後，數據存到數據庫，然後跳轉到這個頁面，
這個頁面寫了一個匿名函數，該函數只要頁面一被渲染將自動執行，這個頁面定義了一個變量name，
然後將這個name 傳給opener的backFunc()函數，之後緊接著執行了window.close()，關閉了頁面。
寫這個頁面的目的一個是用戶操作友好一點，第二就是將obj.title傳給了先前的網頁，讓先前的p1網頁可以繼續操作數據，創建option。
如上，這就是簡單的popup彈窗的使用方法。
利用js實現popup彈窗