Open_pop_up_window

################# In your templates

{% block content %}

    <div class="card-body">
                <!-- -->
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th style="width: 10px"># ID</th>
                            <th>Post Title</th>
                            <th>Creation Date </th>
                            <th>Description</th>
                            <th>Status</th>
                            <th style="width: 5%"><span class="fas fa-eye"></span></th>
                            <th style="width: 5%"><span class="fas fa-edit"></span></th>
                            <th style="width: 10%"><span class="fas fa-trash-alt"></span></th>
                            <th style="width: 10%"><span class="fas fa-image"></span></th>
                        </tr>
                    </thead>
                    {% for obj in main_page %}
                    <tbody>
                        <tr>
                            <td>{{obj.id}}</td>
                            <td>{{obj.title}}</td>
                            <td>{{obj.created_at}}</td>
                            <td>{{obj.description}}</td>
                            <td>
                                {% if obj.active %}
                                    <a href="{% url 'switch_active' obj.id 'branding' 'Posts' %}">
                                        <span class="badge bg-gradient-success">active</span>
                                    </a>
                                {% else %}
                                    <a href="{% url 'switch_active' obj.id 'branding' 'Posts' %}">
                                        <span class="badge bg-gradient-secondary">inactive</span>
                                    </a>
                                {% endif %}
                            </td>
                            <td>
                                <a href="#">
                                    <span class="badge bg-gradient-purple">view</span>
                                </a>
                            </td>
                            <td>
                                <a href="{% url 'edit_post' obj.id %}">
                                    <span class="badge bg-gradient-primary">edit</span>
                                </a>
                            </td>
                            {% if obj.is_deleted %}
                                <td>
                                    <a href="{% url 'switch_delete' obj.id 'branding' 'Posts' %}">
                                        <span class="badge bg-gradient-danger">deleted</span>
                                        <span class="fa fa-recycle"></span>
                                    </a>
                                </td>
                            {% else %}
                                <td>
                                    <a href="{% url 'switch_delete' obj.id 'branding' 'Posts' %}" onclick="return
                                           confirm('Are you sure, you will delete this record ?')">
                                        <span class="fas fa-trash-alt"></span>
                                    </a>
                                </td>

                            {% endif %}
                            <td>
                                {% if obj.image %}
                                    <a href="#" onclick="openWindow('{{obj.image.url}}')">
                                        <img src="{{obj.image.url}}" alt="pic" width ="50%" height="auto">
                                    </a>

                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                    {% endfor %}
                </table>
            </div>

{% endblock %}

{% block scripts %}

    <script>
        //** for open a good popup window nice code to perform the mission
        function openWindow(url) {
            var w = 480,
                h = 340;
            if (document.getElementById) {
                w = screen.availWidth;
                h = screen.availHeight;
            }

            var popW = 900, //300,
                popH = 500; //200;

            var leftPos = (w - popW) / 2;
            var topPos = (h - popH) / 2;

            msgWindow = window.open(url, 'popup', 'width=' + popW + ',height=' + popH +
            ',top=' + topPos + ',left=' + leftPos + ', scrollbars=yes');


        }
    </script>

{% endblock %}