Ir para conteúdo
Fórum Script Brasil
  • 0

Usando o modal Bootstrap 5 sem o botão do click


Frank K Hosaka

Pergunta

Eu sempre quis colocar um modal no meu projeto PHP. O problema é que eu não sabia como chamar o modal através do JavaScript. A sintaxe (new bootstrap.Modal(myModal)).show() só funciona com o Bootstrap 5.2 para cima, e ela vai ser útil quando você precisar deixar uma mensagem para o usuário, quando ele solicitar um serviço que não está disponível ou faltarem mais dados.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>

<button data-bs-toggle="modal" data-bs-target="#myModal">
  versão clássica
</button>

<p>

<button onclick="(new bootstrap.Modal(myModal)).show()">
  versão java script
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        Teste
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
    </div>
  </div>
</div>

 

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
Postado (editado)

Existem vários tipos de modal, tem um para dar um alerta, aguardar confirmação e outro para coletar informação. O código seguinte sugere colocar tudo que é tipo de modal dentro de um arquivo:

arquivo index.php
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<?php require 'modal.php' ?>
<script>
    function fechar(fecharModal)
    {
        fecharModal.classList.remove('d-block')
        fecharModal.classList.add('d-none')
    }
    function abrir(abrirModal)
    {
        abrirModal.classList.remove('d-none')
        abrirModal.classList.add('d-block')

    }
</script>
<div class=h-25></div>
<table class='table table-striped w-25'>
    <tr class=fw-semibold><td>Exemplos do Bootstrap
    <tr><td onclick=abrir(modalSheet)>modalSheet
    <tr><td onclick=abrir(modalChoice)>modalChoice
    <tr><td onclick=abrir(modalTour)>modalTour
    <tr><td onclick=abrir(modalSignin)>modalSigin
</table>
      
arquivo modal.php
<!-- modalSheet -->
<div class="modal opacity-75 d-none bg-body-secondary p-4 py-md-5" 
  tabindex="-1" role="dialog" id="modalSheet">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header border-bottom-0">
        <h1 class="modal-title fs-5">Modal title</h1>
        <button type="button" class="btn-close" onclick=fechar(modalSheet) aria-label="Close"></button>
      </div>
      <div class="modal-body py-0">
        <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
      </div>
      <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0">
        <button type="button" class="btn btn-lg btn-primary">Save changes</button>
        <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- modalChoice -->
<div class="modal opacity-75 d-none bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-3 shadow">
      <div class="modal-body p-4 text-center">
        <h5 class="mb-0">Enable this setting?</h5>
        <p class="mb-0">You can always change your mind in your account settings.</p>
      </div>
      <div class="modal-footer flex-nowrap p-0">
        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button>
        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" onclick=fechar(modalChoice)>No thanks</button>
      </div>
    </div>
  </div>
</div>

<!-- modalTour -->
<div class="modal  opacity-75 d-none bg-body-secondary" tabindex="-1" role="dialog" id="modalTour">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-body p-5">
        <h2 class="fw-bold mb-0">What's new</h2>

        <ul class="d-grid gap-4 my-5 list-unstyled small">
          <li class="d-flex gap-4">
            <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
            <div>
              <h5 class="mb-0">Grid view</h5>
              Not into lists? Try the new grid view.
            </div>
          </li>
          <li class="d-flex gap-4">
            <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg>
            <div>
              <h5 class="mb-0">Bookmarks</h5>
              Save items you love for easy access later.
            </div>
          </li>
          <li class="d-flex gap-4">
            <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg>
            <div>
              <h5 class="mb-0">Video embeds</h5>
              Share videos wherever you go.
            </div>
          </li>
        </ul>
        <button type="button" class="btn btn-lg btn-primary mt-5 w-100" onclick=fechar(modalTour)>Great, thanks!</button>
      </div>
    </div>
  </div>
</div>

<!-- modalSignin -->
<div class="modal opacity-75 d-none bg-body-secondary" tabindex="-1" role="dialog" id="modalSignin">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header p-5 pb-4 border-bottom-0">
        <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
        <button type="button" class="btn-close" onclick=fechar(modalSignin) aria-label="Close"></button>
      </div>

      <div class="modal-body p-5 pt-0">
        <form class="">
          <div class="form-floating mb-3">
            <input type="email" class="form-control rounded-3" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">Email address</label>
          </div>
          <div class="form-floating mb-3">
            <input type="password" class="form-control rounded-3" id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">Password</label>
          </div>
          <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button>
          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
          <hr class="my-4">
          <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
            <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
            Sign up with Twitter
          </button>
          <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
            <svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg>
            Sign up with Facebook
          </button>
          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
            <svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg>
            Sign up with GitHub
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

 

Captura de tela 2024-05-28 065350.png

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

  • 0

O próximo código presume que o Bootstrap já foi carregado. Usei o modal para substituir as funções prompt(), confirm() e alert() do JavaScript. A grande diferença entre essas funções e o modal é que as funções param a execução do código, enquanto as funções não forem concluídas. Para simular algo parecido, eu fiz uma gambiarra, criando um temporizdor de 10 segundos:

arquivo modal.php
<script>
    function abrir(abrirModal)
    {
        abrirModal.classList.remove('d-none')
        abrirModal.classList.add('d-block')
    }

    function fechar(fecharModal)
    {
        fecharModal.classList.remove('d-block')
        fecharModal.classList.add('d-none')
    }

    function bling(pedido,vendido)
	  {
		  if(!vendido)
		  {
			  mensagemModalSheet.innerHTML="<h1>Não dá para criar pedido Bling quando ainda não foi vendido</h1>"
			  abrir(modalSheet)
		  } else {
			  btnVariavel.addEventListener('click',function(event)
          {
            window.location.href=`bling.php?pedido=${pedido}&pBling=${variavel.value}`
            fechar(modalSignin)
            setTimeout(()=>{location.replace("orcamento.php")},1000) // atualizar a tela após 10 segundos
          })
			  abrir(modalSignin)
        
		  }
	  }

	  function apagarBling(pedido)
	  {
		  mensagemModalChoice.innerHTML=`Você quer apagar o pedido Bling do pedido ${pedido} ?`
		  btnChoice.addEventListener('click',function(event){window.location.href=`orcamento.php?apagarBling=${pedido}`})
		  abrir(modalChoice)
	  }
</script>

<!-- modalSheet -->
<div class="modal d-none p-4 py-md-5" 
  tabindex="-1" role="dialog" id="modalSheet">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header border-bottom-0 opacity-1">
        <h1 class="modal-title fs-5">Mensagem</h1>
        <button type="button" class="btn-close" onclick=fechar(modalSheet) aria-label="Close"></button>
      </div>
      <div class="modal-body py-0">
        <p id=mensagemModalSheet></p>
      </div>
    </div>
  </div>
</div>

<!-- modalSignin -->
<div class="modal d-none" tabindex="-1" role="dialog" id="modalSignin">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header p-5 pb-4 border-bottom-0">
        <h5 class="fw-semibold mb-0 fs-2">Digite o número do pedido Bling</h5>
        <button type="button" class="btn-close" onclick=fechar(modalSignin) aria-label="Close"></button>
      </div>

      <div class="modal-body p-5 pt-0">
          <div class="form-floating mb-3">
            <input class="form-control rounded-3" id=variavel autofocus>
            <label for="floatingInput">Número do Pedido Bling</label>
            <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit" id=btnVariavel>Enviar</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- modalChoice -->
<div class="modal d-none p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-3 shadow">
      <div class="modal-body p-4 text-center">
        <h4 class="mb-0" id=mensagemModalChoice></h4>
      </div>
      <div class="modal-footer flex-nowrap p-0">
        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end" id=btnChoice><strong>Sim, eu quero</strong></button>
        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" onclick=fechar(modalChoice)>Não, apertei por engano</button>
      </div>
    </div>
  </div>
</div>

 

Link para o comentário
Compartilhar em outros sites

  • 0
Postado (editado)

O <input autofocus> não funciona no modal do Bootstrap, para contornar o problema usei o JavaScript

abrir(modalSignin)

variavel.focus()
 

arquivo modal.php // esse código pressupõe que o Bootstrap já foi carregado
<script>
  //...
  function bling(pedido,vendido)
	  {
		  if(!vendido)
		  {
			  mensagemModalSheet.innerHTML="<h1>Não dá para criar pedido Bling quando ainda não foi vendido</h1>"
			  abrir(modalSheet)
		  } else {
			  btnVariavel.addEventListener('click',function(event)
          {
            window.location.href=`bling.php?pedido=${pedido}&pBling=${variavel.value}`
            fechar(modalSignin)
            setTimeout(()=>{location.replace("orcamento.php")},1000) // atualizar a tela após 10 segundos
          })
			  abrir(modalSignin)
        variavel.focus() // colocando o foco no <input id=variavel>
        
		  }
	  }

</script>

<!-- modalSignin -->
<div class="modal d-none" tabindex="-1" role="dialog" id="modalSignin">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header p-5 pb-4 border-bottom-0">
        <h5 class="fw-semibold mb-0 fs-2">Número do pedido Bling</h5>
        <button type="button" class="btn-close" onclick=fechar(modalSignin) aria-label="Close"></button>
      </div>

      <div class="modal-body p-5 pt-0">
          <div class="form-floating mb-3">
            <input type=text class="form-control rounded-3 fs-2" id="variavel">
          </div>
          <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit" id=btnVariavel>Enviar</button>
      </div>
    </div>
  </div>
</div>

 

Captura de tela 2024-05-29 164004.png

Editado por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...