1

Tengo una pantalla con un nav-tabs y un modal de Boostrap:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<!-- Nav Tab -->
    <ul class="nav nav-tabs card-header-tabs" id="nav-tab" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" id="nav-campos-tab" data-bs-toggle="tab" href="#nav-campos" role="tab"
          aria-controls="nav-campos" aria-selected="true">Campos</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="nav-perfiles-tab" data-bs-toggle="tab" href="#nav-perfiles" role="tab"
          aria-controls="nav-perfiles" aria-selected="false">Perfiles</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="nav-recursos-tab" data-bs-toggle="tab" href="#nav-recursos" role="tab"
          aria-controls="nav-recursos" aria-selected="false">Recursos</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="nav-perfil-recurso-tab" data-bs-toggle="tab" href="#nav-perfil-recurso" role="tab"
          aria-controls="nav-perfil-recurso" aria-selected="false">Perfil-Recurso</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="nav-visibilidad-tab" data-bs-toggle="tab" href="#nav-visibilidad" role="tab"
          aria-controls="nav-visibilidad" aria-selected="false">Visibilidad</a>
      </li>
    </ul>

<div class="modal fade" id="form" tabindex="-1" aria-labelledby="formLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 id="formHeader" class="modal-title" id="formLabel"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div id="formBody" class="modal-body"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button id="addButton" type="button" class="btn btn-primary" data-action="">A&ntilde;adir</button>
        </div>
      </div>
    </div>
  </div>

EDITADO

Corrijo el problema: Cuando estoy en una de las pestañas del tab, si esta es la que levanta por primera vez el Modal, a partir de ahora esta pestaña siempre levantará el Modal, excepto en el caso de ser la primera pestaña, la que está activa por defecto, que cuyo caso hace que el click en la siguiente pestaña consecutiva levante el Modal.

Y el modal lo abro con un botón mediante Javascript con la siguiente función:

table = $('#table-campos').DataTable({
    dom: 'Bfrtip',
    buttons: [
        {
            className: 'btn btn-secondary btn-sm',
            text: 'Nuevo Campo',
            action: () => {
                generateForm('nuevo', null);
            }
        },
        {
            className: 'btn btn-secondary btn-sm',
            text: 'Editar',
            action: (e, dt, node, config) => {
                generateForm('editar', dt.row('.selected').data());
            },
            enabled: false
        },
        {
            extend: 'excel',
            className: 'btn btn-secondary btn-sm',
            filename: 'tabla_campos'
        }
    ],
    select: true,
    data: xml,
    columns: [
        { data: 'id' },
        { data: 'nombre' },
        { data: 'descripcion' },
        { data: 'fecha_creacion' },
        { data: 'nombre_objeto' }
    ],
    rowId: 'id'
});

function generateForm(button, data) {
    var header, action, btnAction = '';
    switch(button) {
        case 'nuevo':
            header = 'Nuevo Campo';
            action = 'campos_nuevo';
            btnAction = 'Añadir';
            break;
        case 'editar':
            header = 'Editar Campo';
            action = 'campos_editar';
            btnAction = 'Editar';
            break;
    }
    // Header
    $('#formHeader').html(header);
    // Campos input
    $('#formBody').load('./view/form/createCampos.html', () => {
        if(button === 'editar') {
            $('#idInput').val(data.id);
            $('#nombreInput').val(data.nombre);
            $('#descripcionInput').val(data.descripcion);
            $('#nombreObjetoInput').val(data.nombre_objeto);
        }
    });
    // Cambiar el action del boton añadir
    const ab = document.querySelector('#addButton');
    ab.dataset.action = action;
    ab.textContent = btnAction;
    // Mostrar el Form
    mostrarForm();
}

function mostrarForm() {
    const bs = require('bootstrap');
    var modal = document.getElementById('form');
    var bsModal = bs.Modal.getInstance(modal);
    if(bsModal === null) bsModal = new bs.Modal(modal);
    bsModal.toggle();
}

Cuando se pulsa sobre en uno de los botones de la tabla, llamo a una función que genera el contenido del Modal dependiendo que botón se ha pulsado y al finalizar llamo a la función que muestra el modal.

También llamo a la función de mostrar el Modal, para ocultarlo cuando pulso el botón de añadir nuevo campo o editar el campo:

document.getElementById('addButton').addEventListener

¿Cómo puedo evitar que la siguiente pestaña que seleccione, abra el Modal?

Gracias de antemano.

4
  • ¿Cómo ejecutas la función mostrarForm()?
    – Triby
    Commented el 20 ene. 2021 a las 15:26
  • creo que te falta el role="dialog" en la linea <div class="modal fade" y si estas usando bootstrap no necesitas la funcion de javascript colmo lo dice aca w3schools.com/bootstrap/bootstrap_modal.asp
    – ger
    Commented el 20 ene. 2021 a las 15:26
  • La función la ejecuto dentro de otra función que genera el contenido del modal de forma dinámica, dependiendo de en qué pestaña se encuentre y de qué botón se pulse.
    – emeerre
    Commented el 20 ene. 2021 a las 15:53
  • Por favor edita la pregunta y agrega el código de la función, junto con todos los eventos que tengas asignados.
    – Triby
    Commented el 20 ene. 2021 a las 17:38

2 respuestas 2

0

Solución

Al final lo he solucionado añadiendo los atributos de data-bs-toggle="modal" y data-bs-target="#form" para los botones de la tabla con la opción de initComplete.

Os dejo el código más abajo:

    table = $('#table-campos').DataTable({
    dom: 'Bfrtip',
    buttons: [
        {
            className: 'btn btn-secondary btn-sm',
            text: 'Nuevo Campo',
            action: () => {
                generateForm('nuevo',null);
            }
        },
        {
            className: 'btn btn-secondary btn-sm',
            text: 'Editar',
            action: (e, dt, node, config) => {
                generateForm('editar', dt.row('.selected').data());
            },
            enabled: false
        },
        {
            extend: 'excel',
            className: 'btn btn-secondary btn-sm',
            filename: 'tabla_campos'
        }
    ],
    select: true,
    data: xml,
    columns: [
        { data: 'id' },
        { data: 'nombre' },
        { data: 'descripcion' },
        { data: 'fecha_creacion' },
        { data: 'nombre_objeto' }                
    ],
    rowId: 'id',
    initComplete: (settings, json) => {
        $('.dt-button').attr('data-bs-toggle', 'modal').attr('data-bs-target', '#form');
    }
 });

Gracias.

-1

Como te dije en el comentario faltaba el role="dialog" en la linea:

<div class="modal fade" id="form" tabindex="-1" aria-labelledby="formLabel" aria-hidden="true">

En este ejemplo cuando le das click a uno de los item del nav bar... se muestra el modal.

Creo que es lo que entendí de tu pregunta, no hay necesidad de usar JavaScript porque el modal esta dentro la libreria de bootstrap

1
  • Gracias por tu respuesta, he probado a incluir role="dialog", pero cuando cierro el modal, ya sea en alguno de los botones o pulsando fuera del modal, me borra el role="dialog" del div y me sigue ocurriendo lo mismo.
    – emeerre
    Commented el 20 ene. 2021 a las 16:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.