title: Create a popup login/register page using django
body: <p>Hi i am new to django and i want to create a popup window for my django application for my login/registration screen. The click on class #modal is non responsive as a result the popup window is not functioning. Please help as all the results i have explored are of php and i don't know how to sync it django.
  <p>Thank you for your help in advance.
  <p>Following is the code attached: </p>
  
  <h2>model.py file:</h2>
  
  <pre><code>class UserProfile(models.Model):
      user = models.OneToOneField(User)
  
      website = models.URLField(blank=True)
      picture = models.ImageField(upload_to='profile_images', blank=True)
  
      def __unicode__(self):
          return self.user.username
  </code></pre>
  
  <h2>view.py file:</h2>
  
  <pre><code>def register(request):
      context = RequestContext(request)
      registered = False
         if request.method == 'POST':
          user_form = UserForm(data=request.POST)
          profile_form = UserProfileForm(data=request.POST)
          if user_form.is_valid() and profile_form.is_valid():
              user = user_form.save()
              user.set_password(user.password)
              user.save()
              profile = profile_form.save(commit=False)
              profile.user = user
              if 'picture' in request.FILES:
              profile.picture = request.FILES['picture']
              profile.save()
              registered = True
              else:
              print user_form.errors, profile_form.errors
      else:
          user_form = UserForm()
          profile_form = UserProfileForm()
          return render_to_response(
              'll/index.html',
              {'user_form': user_form, 'profile_form': profile_form, 'registered': registered},
              context)
  </code></pre>
  
  <h2>forms.py file:</h2>
  
  <pre><code>class UserForm(forms.ModelForm):
      password = forms.CharField(widget=forms.PasswordInput())
  
      class Meta:
          model = User
          fields = ('username', 'email', 'password')
  
  class UserProfileForm(forms.ModelForm):
      class Meta:
          model = UserProfile
          fields = ('website', 'picture')
  </code></pre>
  
  <h2>index.html file:</h2>
  
  <pre><code>&lt;section id="modal" class="modal fade"&gt;
      &lt;div class="modal-body"&gt;
          {% if registered %}
          &lt;strong&gt;Thank you for registering!&lt;/strong&gt;
          &lt;a href="../ll/"&gt;Return to the homepage.&lt;/a&gt;&lt;br /&gt;
          {% else %}
          &lt;strong&gt;Register Here!&lt;/strong&gt;&lt;br /&gt;
  
          &lt;form id="user_form" method="post" action="../ll/"
                  enctype="multipart/form-data"&gt;
              {% csrf_token %}
              {{ user_form.as_p }}
              {{ profile_form.as_p }}
              &lt;input type="submit" name="submit" value="Register" /&gt;
          &lt;/form&gt;
          {% endif %}
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;script&gt;
  $(function() {
      $( "#modal" ).dialog({
          autoOpen: false,
          height: 500,
          width: 550,
          modal: true,
          buttons: {
              Close: function() {
                  $( this ).dialog( "close" );
              }
          },
          close: function() {
              allFields.val( "" ).removeClass( "ui-state-error" );
          }
      });
  
      $( "#login" ).click(function() {
              $( "#modal" ).dialog( "open" );
          });
  });
  &lt;/script&gt;
  </code></pre>