How to add tabs to my modal bootstrap

Asked

Viewed 2,875 times

0

I’m using the twitter bootstrap library version 4.0 I managed to create a modal window but I would like to add tabs on it, I found some codes but I couldn’t implement them..

Keep going like 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’s call is made like this:

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

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

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

twitter-bootstrap bootstrap modal

  • Look, version 4 is not yet stable. It may not have all the features ready. But these TABS shall be accessible as long as the MODAL is open, right?

  • Actually I want tabs inside the modal, as in this example: http://s.bootply.com/render/Qkuuimkqtc

  • 1

    That’s right. I get it. That’s it JQuery. I even think I have a model ready here that I’ve used... Already tried to pass the contents of divs id="home" and id="profile" with a include?

  • I don’t have any content yet, my problem is that the tabs don’t even appear, my modal looks like this: http://prntscr.com/djsekx

  • Ah... right. The flaw is in the display...

  • This, sorry not to be clear.. I will ask an Edit in question..

Show 1 more comment

3 answers

1

You are using version 4.* with version 3 markup.*. I used the standard markup of the extracted version 4 from here and 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 -->

Watch what’s inside the div <div class="modal-body">.

Ah, I also included libraries using the CDN: reference, but download everything and include gives in the same, you just need to make sure you have downloaded the right files.

  • Unfortunately, it didn’t work. It still looks like this: http://prntscr.com/dk3b8u .. :/

  • Look, this flaw has nothing to do with behavior, so it can’t be javascript. Show here the way you are including the library, can be that. Pay attention to the inclusion order of the library and follow the template presented by the developer: example. Include the bootstrap.min.css before any other style sheet you are using.

  • I found the problem.. Here’s the answer I posted ;) thanks for all the help.

  • Mark your answer, don’t leave the question unsolved ;)

  • Yes, but to mark my own answer Stacko only releases tomorrow. hehe, tomorrow mark ;) was worth

0


I discovered the problem.. At the end I had an old CSS that set style in UL, I didn’t remember that this CSS existed..

Sorry for the error, now it’s showing ;) thank you.

0

If I understand what you need, put tabs with content, in case, TABS. You need to put something more or less like this inside 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 by the link: http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

  • I want to do this within my modal, as follows: http://s.bootply.com/render/Qkuuimkqtc

  • which error appears when you use an Inspect element?

  • Sorry Rubens, I don’t understand.. I’m not having any mistakes only my tabs don’t appear, it follows as it is at the moment: prntscr.com/djsekx

  • Yes, but I need to know what kind of error appears from java script to not work tabs, you use firebug? You can give an Inspect element on the page to see which js errors appear

  • The problem is not javascript...

  • I had forgotten to check the errors of the page by Inspect, follow an image of the error that appears to me.. This error happens the moment I open my page, before opening the modal window.. http://prntscr.com/djsnfv

  • I think it’s not really JS, I think it’s something with CSS or my HTML structure..

  • If there are no JS (which I find difficult) or library loading errors, the problem may be CSS .. tries to load the libraries again.. Or use an earlier version of bootstrap to test.

Show 3 more comments

Browser other questions tagged twitter-bootstrap bootstrap modal

You are not signed in. Login or sign up in order to post.