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

Navigation
0

I'm developing a site which I need to call a modal in the submenu of a bootstrap navbar, however, the file in php with the page I'd like to call is in a different folder than the navbar file. I searched a lot of sites and found a way that did not work, could anyone help me?

My navbar code: 

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: \ Project \ view \ main \ main_principal.php (file containing navbar, main screen) C: \ Project \ view \ modal \ index.php (file with modal)

    
asked by anonymous 25.05.2018 / 23:46

2 answers

0

So I understand it would be a navbar with a modal and the loading of pages within the modal and the modal 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.

Since your page has already loaded the Bootstrap and Jquery files, here is an example.

In the dropdown submenu in the mouse click event, I called the javascript function openPageNoModal (); and in it you pass as a parameter the url (directory / file) that will be requested and opened inside the modal, soon loaded, the function calls the modal with the event .modal ('show'); to load the mode visually. 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>
    
26.05.2018 / 00:11
0

Try using the call as follows: 

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

At each "../", the system climbs one level in the path of the path.

    
29.05.2018 / 18:48
How to convert the positive value of an aob to a negative value? Ionic - error (undefined) Area name