Open a jQuery UI dialog box popup with content from a Django template.

popup.html

<p>Hello, {{ user }}</p>

views.py

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

urls.py

from . import views
urlpatterns = [
    url(r'^popup/$', views.popup)
]

html

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<a href="/popup/" class="js-popup-link">bring up a popup</a>
<div id="popup"></div>

javascript

$(function(){
  $('.js-popup-link').click(function(e){
    e.preventDefault()
    $('#popup').dialog({modal: true}).dialog('open').load(this.href)
  })
})
Advertisements