I want to create django popup form in my project [closed]

Question

I have created fee management system in django.

The problem is I am using simple form and for each form user have to navigate to separate page.

I want to create popup form in django. I have search many websites but can't get solution enter image description here

In above window when user click on payment button pop-up form will be open. and when user click on submit button changes will be shown in same page.

Can anyone tell me how to solve this? or share code if you have work in same area.

Answer 1

Why not use bootstrap modals instead?

For example https://pypi.org/project/django-bootstrap-modal-forms/

Examples To see django-bootstrap-modal-forms in action clone the repository and run the examples locally:

$ git clone https://github.com/trco/django-bootstrap-modal-forms.git
$ cd django-bootstrap-modal-forms
$ python -m pip install -r requirements.txt
$ python manage.py migrate
$ python manage.py runserver

Signup form in Bootstrap modal For explanation how all the parts of the code work together see paragraph Usage. To test the working solution presented here clone and run Examples. forms.py

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from bootstrap_modal_forms.mixins import PopRequestMixin, CreateUpdateAjaxMixin


class CustomUserCreationForm(PopRequestMixin, CreateUpdateAjaxMixin,
                             UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'password1', 'password2']

signup.html

{% load widget_tweaks %}

<form method="post" action="">
  {% csrf_token %}

  <div class="modal-header">
    <h3 class="modal-title">Sign up</h3>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body">

    <div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
      {% for error in form.non_field_errors %}
        {{ error }}
      {% endfor %}
    </div>

    {% for field in form %}
      <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" placeholder=field.label %}
        <div class="{% if field.errors %} invalid{% endif %}">
          {% for error in field.errors %}
            <p class="help-block">{{ error }}</p>
          {% endfor %}
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="modal-footer">
    <button type="button" class="submit-btn btn btn-primary">Sign up</button>
  </div>

</form>

views.py

from django.contrib.messages.views import SuccessMessageMixin
from django.urls import reverse_lazy
from django.views import generic
from bootstrap_modal_forms.mixins import PassRequestMixin
from .forms import CustomUserCreationForm

class SignUpView(PassRequestMixin, SuccessMessageMixin, generic.CreateView):
    form_class = CustomUserCreationForm
    template_name = 'accounts/signup.html'
    success_message = 'Success: Sign up succeeded. You can now Log in.'
    success_url = reverse_lazy('index')

urls.py

from django.urls import path
from . import views

app_name = 'accounts'
urlpatterns = [
    path('signup/', views.SignUpView.as_view(), name='signup')
]

.html file containing modal, trigger element and script instantiating modalForm

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

<button class="signup-btn btn btn-primary" type="button" name="button">Sign up</button>

<script type="text/javascript">
  $(function () {
    // Sign up button
    $(".signup-btn").modalForm({formURL: "{% url 'accounts:signup' %}"});

  });
</script>

Answer 2

Using popups/modals is best done with frameworks as they provide easy building. Trying to code many modals on a single page manually can be laborious. But if you must, here is a single popup example i've coded in vanilla html, css and javascript.

The basic principle is:

• The popup is a dimmed div which covers 100% of the viewport. It has is display none.

• When the button is clicked, the popup div's display property is set to block

• The popup div can sit outside of your main site's content. It is able to do this by having absolute positioning.

As others have stated, check out some frameworks which provide modals, such as bootstrap and bulma

var popup1 = document.getElementById("popup-1")
var openPopup1 = document.getElementById("open-popup-1")
var closePopup1 = document.getElementById('close-popup-1')

openPopup1.addEventListener('click', () => {
	popup1.style.display = "block";
})

closePopup1.addEventListener('click', () => {
	popup1.style.display = "none";
})

body {
	font-family: arial;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.main-site {
	padding-top: 5px;
	width: 95%;
	max-width: 960px;
	margin: 0 auto;
}

#popup-1 {
	display: none;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	height: 100vh;
	width: 100%;
}

.popup-content {
	position: relative;
	padding: 20px;
	margin: 0 auto;
	background-color: white;
	width: 400px;
	top: 5vh;
}

<div id="popup-1">
	<div class="popup-content">
		<h1>Popup Title</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<button id="close-popup-1">Close</button>
	</div>
</div>

<div class="main-site">
	<h1>Webpage</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<button id="open-popup-1">Open Popup</button>
</div>