How to call a modal page in a navbar on bootstrap?

Asked

Viewed 941 times

1

I’m developing a website that I need to call a modal in the submenu of a bootstrap navbar, but the php file with the page I’d like to call is in a different folder than the file that navbar was created for. I searched a lot of sites and I couldn’t find a way that would work, someone could help me?

Code of my navbar:

public function get_menu() {            
                echo <<<HTML
                <nav class="navbar my-nav navbar-expand-lg">
                <a class="navbar-brand" href="#">Sistema</a>
                  <button class="navbar-toggler navbar-toggler-right custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>                 
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                        <a class="nav-link" href="#">Início <span class="sr-only">(current)</span></a>
                        </li>                       
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Cadastrar</a>                          
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">                            
                              <a class="dropdown-item menu_item" href="#">Perfil</a>
                              <a class="dropdown-item menu_item" href="#">Usuário</a>
                        </li>                       
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Consultar</a>                           
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">                              
                              <a class="dropdown-item menu_item" href="#">Perfil</a>
                              <a class="dropdown-item menu_item" href="#">Usuário</a>                  
                            </li>                                               
                        <li class="nav-item">
                          <a class="nav-link" href="#">Sair</a>
                        </li>
                    </ul> 
                </div>
            </nav>     
HTML;


        }

Folder structure:

C: Main view project funcoes_main.php (file containing navbar, main screen) C: Project view modal index.php (modal file)

php javascript twitter-bootstrap link nav-bar

  • Use the code you have developed to get more help, also read https://answall.com/tour

  • Paste your navbar code and archive structure for better understanding so the community can help.

  • You couldn’t call the php file that is in a different directory than the one containing the navbar? If so, put the code of the main file and how the call is being made. This would already be a 'start' for the staff can help. Note: Avoid disclosing confidential information, which may be in the code.

  • This will help you https://answall.com/questions/198422/footpath-to-foots-html-css-php-etc

  • Aline here has the Bootstrap Modal documentation. If no one here answers you there for sure has the answer! https://getbootstrap.com/docs/3.3/javascript/#modals first you have to open the modal by clicking on the Menu, then make an includ to call the other page inside the modal.

2 answers

0

From what I understood would be a navbar with a modal and the loading of pages inside the modal and the modal to be displayed with the requested content, I made a function where you can open several pages from a function, so you can reuse the code to load as many pages as you want.

Considering that your page has already uploaded the Bootstrap and Jquery files, follow an example.

In the dropdown submenu in the mouse click event, I called the javascript function to open Javascript(); and in it you pass as parameter the url (directory/file) that will be requested and opened inside the modal, then loaded, the function calls the modal with the event. modal('show'); to load the modal visually. I hope it works. 

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Pagina</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Menu dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="javascript:void(0);" onclick="abrirPaginaNoModal('diretorio/arquivo.html')">Abrir pagina 01</a>
          <a class="dropdown-item" href="javascript:void(0);" onclick="abrirPaginaNoModal('diretorio/arquivo-2.html')">Abrir pagina 02</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<div class="modal fade" tabindex="-1" role="dialog" id="modalPaginas">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">MODAL</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<script>
function abrirPaginaNoModal(url){
  $(".modal-body").load(url); // chama diretório/arquivo dentro do corpo do modal
  $("#modalPaginas").modal('show'); // Abre o modal visualmente
}
</script>

  • I don’t think that’s it... I’ll try to explain it better. I have a folder named project and inside this folder I have another called view and inside this folder a folder called main with a php file that contains a function that generates a navbar, this file is my main screen of the site. Inside the view folder I have another folder called modal, which I made a modal that I wanted to call in my menu from the main page, only I don’t know how to call this modal in a submenu by being in a different directory/folder...

  • Could someone help me?

  • It would be easier to help you if you post your code here, and the structure of your directory, and the more commented your code for understanding you can help with, it will be easier with a proper response as you wish.

0

Try using the call as follows: 

"../modal/index.php" ou "../../(etc.)"

With each ".. /", the system moves up a level in the path of the path.

  • Didn’t work...

  • @Aline Error message appears in the console?

  • No, when I click on the submenu it doesn’t happen at all

Browser other questions tagged php javascript twitter-bootstrap link nav-bar

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