Começando com bootstrap-modal

Mensagem Simples com Bootstrap Modal

O código abaixo mostrará o modelo de bootstrap sem escrever código longo, gerando o modelo de bootstrap em tempo de execução. Também facilitará a criação de vários modelos de bootstrap, ou seja, um no outro. Siga abaixo o código simples para fazer o modelo de bootstrap simples.

Inclua abaixo o CSS no seu código

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"/>

Código HTML para o seu modelo mostrar facilmente

Click Button next to see bootstrap popup with just simple message only.
    <button class="btn btn-primary" type="button" onclick="showModalNow()">Click Me</button>

Inclua o script abaixo em seu código para que o modelo de bootstrap funcione facilmente

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js" type="text/javascript" />
<script>
    function showModalNow(){
        BootstrapDialog.show({
            message: 'Hi Apple!'
        });
    }
</script>

Instalação ou configuração

O Bootstrap Model já vem com o bootstrap.min.js Mas para torná-lo mais simples e fácil de executar Vamos precisar seguir os passos abaixo.

Instalação: -

Basta adicionar abaixo css e JS à sua página html.

<link href=“https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css” rel=“stylsheet”>

<script src=“https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js” type=“text/javascript” />

Ou

Você pode baixar o pacote inteiro no link abaixo.

https://github.com/nakupanda/bootstrap3-dialog