Bootstrap modal with multiple tabs in Django project

HTML - Bootstrap modal with multiple tabs in Django project

Imajen https://unsplash.com/photos/fjhNL1pGcQs

Autor Ony | May 10, 2022 | Referensia original Http://jsfiddle.net/n__o/19rhfnqm/

Create a modal that has multiple tabs use bootstrap. In each tab with a different content. This example I tried to show in two different tabs as Share and Comment.

My example code in app/modal_tabs.html:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Test bootstrap modal with some tabs
        </title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    <body>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Show modal</button>
        <!-- Modal Alert-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">Share or Comment</h4>
                    </div>
                    <!-- Modal body-->
                    <div class="modal-body">
                        <div role="tabpanel">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#shareTab" aria-controls="shareTab" role="tab" data-toggle="tab">Share</a></li>
                                <li role="presentation"><a href="#commentTab" aria-controls="commentTab" role="tab" data-toggle="tab">Comment</a</li>
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="shareTab">
                                    <p>WhatsApp, Facebook, Linkedin, Twitter</p>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="commentTab">
                                    <input type="text" placeholder="Your name..."/>
                                    <input type="email" placeholder="Your email..."/>
                                    <textarea type="textarea" placeholder="Your comment..."></textarea>
                                    <button type="submit">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

... and when we click on the Show modal button, it will be display like those:

In Share tab:

In Comment tab:

Visit demo http://jsfiddle.net/n__o/19rhfnqm/

0 Komentárius

Post ne'ebé ligadu

La iha post ida ne'ebé ligadu ho post ne'e!