Skip to content

Behind the tool, show image in modal in full screen

Here is a snippet that show a proto, it needs more work to be fully operational (mutualise the code, static/dyn loading of the full size image).


        <a href="#" type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</a>
        <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen">
                <div class="modal-content">
<!--                    <div class="modal-header">-->
<!--                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>-->
<!--                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
<!--                    </div>-->
                    <div class="modal-body d-flex justify-content-center">
                        <img src="{% sstatic '/img/zoning-1.jpg' %}"></a>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                </div>
            </div>
        </div>

It will consume time to do it properly (few but more than 0), and I not sure it improve the UX => won't fix

I keep it open so we can talk about it later