Calling layouts within a modal

Question

Calling layouts within a modal

Asked 8 years, 1 month ago

Viewed 1,374 times

2

I have an application ready with its own layout, and within this layout I use the fancybox. Only now I am obliged to migrate to the bootstrap and I’m using the Adminlte-2.1.1 for fitting in with what I want.

The big question is to migrate the parts with the fancybox for modal. In the fancybox it was only declaring a class and giving options of the size of the iframe and opened the independent page, as shown below:

$(".detalhes").fancybox({
        closeBtn  : true,
            type: 'iframe',
            'autoSize': false,      
            'width': 600, 
            'height': 500
    });

Link call:

<a class="detalhes fancybox.iframe" href="detalhes.php?id='.$row[7].'" >
<img src="imagens/atualiza.png" border=0 title="Ver detalhes "/>
</a>

Already with the modal of bootstrap, the page opens from the page itself, as follows::

$(document).on('click', '[data-toggle="meumodal"]', function(event){
  event.preventDefault();
  target = $(this).attr("data-target");
  content = $(this).attr("href");
  $(target+".modal .modal-content").load(content,function(){
     $(target).modal('show');
  });
});

div do modal:

<div class="modal fade" id="myModal" data-toggle="meumodal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
   </div>
</div>

link call:

<a data-toggle="meumodal" href="detalhes.php?id='.$row[7].'" data-target="#myModal" class="btn btn-info" title="Ver detalhes">
<i class="fa fa-file-zip-o"></i>
</a>

div external page:

<div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Detalhes Requerimento</h4>
            </div>
            <div class="modal-body">

CONTEÚDO


</div>

<div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">cancelar</button>                    
</div>

that is, much more work. But regardless of this, I prefer migration, because it would be a very unprofessional job.

There is no other plugin for bootstrap calling the independent page with the modal layout?

No jquery calls work in modal and are just like in fancybox.

Example:

$(".curso").hide();
$(".local").hide();
$(".orgao").hide();

$('#tipo').on('change', function () {
    var valor = this.value;

    if(valor == 3){
    $(".curso").show();
    $(".local").show();
    $(".orgao").hide();
    }else if(valor == 2){
    $(".curso").hide();
    $(".local").show();
    $(".orgao").hide();     
    }else{
    $(".curso").hide();
    $(".local").hide();
    $(".orgao").show(); 
    }


});

    $(".data").mask("99/99/9999");

2 answers

Browser other questions tagged jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by Deividson Oliveira • **503** points · Answer 1 · 2016-11-22T20:05:00+00:00

<div class="modal hide fade" id="mdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">

   </div>
<div class="modal-body">

</div>
<div class="modal-footer">

</div>

Apparently missing the mother div where inside were the Divs header and footer

the call jquery $("mdModal"). modal("show");

by ShutUpMagda • **2,056** points · Answer 2 · 2016-11-22T20:27:14+00:00

Vc can save modals in separate files. Load the modal content by calling id in the other document:

myModal.html:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
            Este modal foi extraído do arquivo myModal.html
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Janela modal de arquivo externo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function () {
    //Comportamento do <a> ao clicar
    $('#btn-modal').click(function () {
        //Pega o conteudo do arquivo myModal.html
        $.get("myModal.html", function (result) {
            //Coloca o conteudo de myModal.html no corpo do index.html
            $( "body" ).append( result);
            //Abre o modal 
            $('#myModal').modal('show');
        });
    });
});
</script>
</head>
<body>
<div class='container'>
    <br>
    <!--Aqui está a chamada do MODAL-->
    <a href='#' data-target="#myModal" class='btn btn-default' id="btn-modal">
        <span class="glyphicon glyphicon-log-in"></span>&nbsp;
            myModal
    </a>
</div>
</body>
</html>

Here was used a tag <a> with a link, but you can also use a <button> with an onclick event, etc.