-2

Boa tarde Pessoal

Sou iniciante no desenvolvimento WEb e não estou conseguindo exibir o modal do boostrap no meu Projeto. O botão aparece normal, porém ao clicar nele, não exibe o modal.

A minha pergunta principal é: Será que devo importar outras bibliotecas, ou esse import que mostrei lá embaixo ja é o suficiente para usar todas os componentes do Bootstrap?

Meu código está assim:

HTML e Javascript - Modal.vue, Componete criado:

<template>
  <div v-bind:id="nome" class="modal fade" tabindex="-1"v-bind:arialabelledby="nome">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      props:['nome']
    }
</script>

Formulario Criado dentro do modal:

<modal nome="meuModalTeste">

  <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Endereço de email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Seu email">
    <small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com ninguém.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Senha</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Clique em mim</label>
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Para adicionar um botão que abre o modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#meuModalTeste">Modal grande</button>

Eu vi em alguns sites, inclusive aqui no StackOverflow que deveria importar algumas bilbiotecas do BOOTSTRAP nos meus imports,mas como podem ver ja tem o import do boostrap.

// Bootstrap
@import '~bootstrap/scss/bootstrap';

Deveria aparecer esse modal, como podem ver na imagem abaixo, mas ao clicar no botão, nada é exibido, nem escurece a tela, que normalmente acontece quando nao tem nenhum conteúdo. O que será que estou fazendo de errado? Agradeco desde já a ajuda de vocês.

Foto tirada do Curso que estou fazendo

1
  • Por favor, edite a pergunta para limitá-la a um problema específico com detalhes suficientes para identificar uma resposta adequada.
    – Comunidade Bot
    Commented 24/12/2021 às 18:43

2 Respostas 2

-3

data-target="#meuModalTeste" no seu botão que aciona o modal é referente ao id que você deu a div do modal, como ao que parece você deu um name para a tag e não um id, consequentemente o modal não funciona.

<div id="meuModalTeste">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Endereço de email</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Seu email">
        <small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com ninguém.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Senha</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Senha">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Clique em mim</label>
      </div>
      <button type="submit" class="btn btn-primary">Enviar</button>
    </form>
</div>

Alterei a tag modal para div e dei um id meuModalTeste para ela ao invés de um name. Aqui tem um exemplo da própria documentação que deve ser interessante Modal - Bootstrap.

2
  • 1
    Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 24/12/2021 às 20:47
  • Pedro nao funcionou , até tentei cara .Na verdade o que eu fiz foi dar um ID dinamico para o meu modal, com props ['nome'] , ou seja, quando abro a tag <modal nome="#meuModalTeste"> , ele passa o parametro nome para o ID que está la no arquivo onde tem o div do arquivo Modal.vue. Commented 28/12/2021 às 0:22
-3

O caminho mais fácil seria você ir ao site do Bootstrap. Olha o 5.2, por exemplo: [ https://getbootstrap.com/docs/5.2/getting-started/introduction/ ]. Lá você clica em Modal e seleciona um exemplo. Copia o exemplo completo e cola no teu site. Veja se funciona. Alguns itens do Bootstrap precisam de scripts adicionais para funcionar, como as Tooltips, por exemplo. Você precisa iniciá-las. Tudo isso você pode ver nos exemplos do site. Veja se consegue e nos avise! : )

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .