Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Criar Modal HTML que segue a janela

Boa tarde a todos, Como faço para minha modal seguir o navegador?, ex: A pessoa rola o mouse para baixo e a modal segue ele na janela.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <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>




    <div class="container">
        <h4>Alerta de Manutenção</h4>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Clique Aqui</button>

        <!-- Modal -->

        <!-- Modal -->
        <div style="position:absolute; left:50%; top:10%">
        <div class="modal fade" id="myModal" role="dialog" style="position:relative; width:auto; margin-left:0; left:-50%">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title" style="margin-right:20px">O Site vai estar em Manutenção</h4>
                    </div>
                    <div class="modal-body">
                        <p>Na terça feira do dia</p>

                        <p>31 de outubro.</p>

                        <p>Tempo Estimado: O dia todo</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                    </div>
                    <div class="modal-auto">
                        <script>
                            $(document).ready(function() {
                                $('#myModal').modal('show');
                            });

                        </script>
                    </div>
                    <div class="modal-resize">
                        <script>
                            $('.modal-content').resizable({
                                //alsoResize: ".modal-dialog",
                                minHeight: 300,
                                minWidth: 300
                            });
                            $('.modal-dialog').draggable();

                            $('#myModal').on('show.bs.modal', function() {
                                $(this).find('.modal-body').css({
                                    'max-height': '100%'
                                });
                            });

                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div></div>
6 respostas

Oi Marcel, tudo bem?

Voce poderia usar um positionamento fixo nessa sua modal.

Fiz um teste rapido aqui nesse Jsbin.

Espero ter ajudado e bons estudos,

Abcs!

Não entendi, Só tem o código padrão do site.

Oi Marcel,

Acabei mandando o link errado.

Refiz aqui:

http://jsbin.com/yunagekudi/edit?html,css,output

Abcs!

Exemplo, eu fiz isso antes, mas o site não aceita css, ele aceita HTML. É possível fazer isso somente em HTML.

solução!

Oi Marcel,

O único jeito de você quebrar o fluxo normal do seu documento é com CSS. Se o projeto não permite a estilização através do CSS, não há como.

Tenta conversar na sua empresa para você ter a possibilidade de usar CSS.

Outra forma é usar o método .css do jQuery, que coloca o CSS por de baixo dos panos.

Abcs!

Legal!!