How to add tabs in my modal bootstrap [closed]

Navigation
0

I'm using the twitter bootstrap library version 4.0 I was able to create a modal window but I would like to add tabs in it, I found some code but I could not implement them ..

Here's how I'm trying: 

<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Adicionar Ação</h4>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#home" data-toggle="tab">Home Tab</a>
                        </li>
                        <li>
                            <a href="#profile" data-toggle="tab">Profile Tab</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="home">Home Content</div>
                        <div class="tab-pane" id="profile">Profile Content</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
  </div>

My model call is made like this:

$ ('# myModal'). modal ('show');

Does anyone know how I can add tabs in my modal, or do you know any tutorials I can study? Thank you.

Edit, here is an image of what I need: s.bootply.com/render/QKuuimkQTC I want to put the tabs within my modal as in the example, however at the moment it is getting like this: prntscr.com/djsekx

    
asked by anonymous 15.12.2016 / 15:53

3 answers

0

I discovered the problem .. In the end I had an old style CSS style in UL, I did not remember that this CSS existed ..

Sorry for the error, it is now appearing;) thanks.

    
16.12.2016 / 12:19
0

If you understand what you need, put tabs with content, in this case, TABS. You need to put something like this in modal-body: 

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

You can check the link: link

    
15.12.2016 / 15:58
0

You are using version 4. * with version 3. * markup. I used the standard markup for version 4 extracted from here and it worked perfectly: 

<!-- myModal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Adicionar Ação</h4>
            </div>
            <div class="modal-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- myModal -->

Attention to what's inside div <div class="modal-body"> .

Oh, I also added the libraries using CDN : reference , but download everything and include it anyway, you just need to make sure you have downloaded the right files.

    
15.12.2016 / 16:46
Capturing variable ajax using php Check duplicate items and update a column in all but one