Como abrir uma janela modal do Bootstrap usando o jQuery?

769

Estou usando a funcionalidade de janela modal do Twitter Bootstrap. Quando alguém clica em enviar no meu formulário, quero mostrar a janela modal ao clicar no "botão enviar" no formulário.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript jquery twitter-bootstrap user244394
fonte
Você tem um erro de digitação na sua opção de programa. É preciso um valor booleano, portanto, não coloque aspas em torno de 'false' - $ ('# my-modal'). Modal ({show: false});
Darren Parker

Respostas:

1413

O Bootstrap possui algumas funções que podem ser chamadas manualmente nos modais:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Você pode ver mais aqui: Componente modal de Bootstrap

Especificamente a seção de métodos .

Então você precisaria mudar:

$('#my-modal').modal({
    show: 'false'
});

para:

$('#myModal').modal('show');

Se você deseja criar um pop-up personalizado, aqui está um vídeo sugerido de outro membro da comunidade:

https://www.youtube.com/watch?v=zK4nXa84Km4

correr atrás
fonte
5
Não sei por que isso não funciona no meu caso. Eu tenho o mesmo código de demonstração na minha página e codifiquei o botão enviar como acima. No entanto, quando clico no envio, a janela modal pisca rapidamente e desaparece. Eu tenho que clicar no botão 'voltar' do navegador para retornar a página.
Chris22
6
Encontrei a resposta aqui para o meu comentário acima. Link duplicado para bootrap.js nas páginas do site.
Chris22
1
Não detectado TypeError: $ (...). Modal não é uma função, isso provavelmente é eu, mas alguma idéia de por que recebo esse erro? (Eu tenho jQuery)
Vladimir verleg
4
Descobri o meu problema, fiz uma chamada ajax para um arquivo que incluía o Jquery. Se o jQuery for incluído duas vezes, ele não funcionará!
Vladimir verleg
2
Eu tentei .modal('show'), mas no navegador Google Chrome não o seu trabalho
Durga
89

Além disso, você pode usar o atributo data

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Nesse caso em particular, você não precisa escrever javascript.

Você pode ver mais aqui: http://getbootstrap.com/2.3.2/javascript.html#modals

Gandarez
fonte
4
Para esclarecer: "não precisa usar javascript" significa "não precisa escrever javascript", o javascript ainda está sendo usado. Tentei editar a resposta, mas ela foi rejeitada porque não era "mais precisa". Se você tentar o código acima com o javascript desativado, ele não funcionará. Isso significa que você usa javascript para mim.
Npretto 28/05
83

Na maioria das vezes, quando $('#myModal').modal('show');não funciona, é causado pela inclusão do jQuery duas vezes. Incluir o jQuery 2 vezes faz com que os modais não funcionem.

Remova um dos links para fazê-lo funcionar novamente.

Além disso, alguns plugins também causam erros, neste caso, adicione 

jQuery.noConflict(); 
$('#myModal').modal('show');
Vladimir verleg
fonte
3
DataTables com ele é pré-embalados versão jQuery causado isso para mim
Wesley Smith
2
Muito obrigado. Estou tendo o mesmo problema: modal não é uma função. Mas depois de adicionar jQuery.noConflict (), ele funciona.
Jobayer Ahmmed
1
Note-se que esta solução alternativa deve ser usada apenas se você não conseguir resolver a causa raiz (por exemplo, inclua o jQuery apenas uma vez). Se algum plug-in de terceiros o incluir, procure a versão não incluída ou entre em contato com terceiros para criar uma.
precisa saber é o seguinte
19

Basta chamar o método modal (sem passar nenhum parâmetro) usando o jQueryseletor.

Aqui está um exemplo:

$('#modal').modal();
Brane
fonte
1
Como passo mais parâmetros para o meu modal? Por exemplo, um ID (dinâmico) específico?
28816
1
Como você faz seu ID ser dinâmico? Você faz isso por ID? se sim, você pode usar a funcionalidade $ (this) do jQuery para selecionar o objeto atual e passar parâmetros para ele.
Brane 29/06
13

Se você usar a função onclick dos links para chamar um modal pelo jQuery, o "href" não poderá ser nulo.

Por exemplo:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

O Modal não pode aparecer. O código certo é:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
saneryee
fonte
12

Aqui está como carregar o alerta de autoinicialização assim que o documento estiver pronto. É muito fácil basta adicionar

 $(document).ready(function(){
   $("#myModal").modal();
});

Eu fiz uma demonstração no W3Schools.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Expandir snippet

csandreas1
fonte
10

Confira a solução completa aqui:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Certifique-se de colocar as bibliotecas na ordem necessária para obter o resultado:

1- Primeiro bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(Em outras palavras, o jquery.min.js deve ser chamado antes do bootstrap.min.js)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
A.Aleem11
fonte
7

Eu tentei vários métodos que falharam, mas o abaixo funcionou para mim como um encanto:

$('#myModal').appendTo("body").modal('show');
incomum
fonte
2
Mesmo! Esta é a única solução que funcionou para mim também.
pengz 26/03
Tem certeza de que não queria .appendTo("modal-body")?
James A Mohler
@novembersky, você precisa colocar o código dentro do evento click ou quando a página carregar usando jquery: $ (document) .ready (function () {$ ("# myModal"). modal ();});
Abhijit Kumar
7

Tente usar jQuery em vez de $ sinal ao chamar a função, funcionou no meu caso, como você pode ver abaixo.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); porque quando jQuery ('# myModal'). modal ('show'); não funciona, é causado pela inclusão do jQuery duas vezes. Incluir o jQuery 2 vezes faz com que os modais não funcionem. e resolveria o problema nesse caso, como no meu caso, está se repetindo.

Além disso, você pode ir para este link

Janela de modelo de inicialização não exibida ao chamar através do JQuery

IB
fonte
4

Tentar

$("#myModal").modal("toggle")

Para abrir ou fechar o modal com o ID myModal.

Se o descrito acima não estiver funcionando, significa que o bootstrap.js foi substituído por algum outro arquivo js. Aqui está uma solução

1: - Mova o bootstrap.js para a parte inferior, para que ele substitua outros arquivos js.

2: - Verifique se o pedido é como abaixo

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
Nikhil Mohadikar
fonte
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Você pode iniciar o modal com o código abaixo disso.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
Alperzkn
fonte
1

Tente isto

myModal1 é o ID do modal

$('#myModal1').modal({ show: true });
vivek
fonte
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Sahnosh Rahguzar
fonte
3
Ao responder perguntas que já têm respostas, tente expandir as respostas existentes. Também é geralmente uma boa ideia incluir uma explicação de como seu código responde à pergunta.
Chris Camaratta
0

Bootstrap 4.3 - mais aqui

Mostrar snippet de código

Kamil Kiełczewski
fonte