Call layouts within a modal

Question

Call layouts within a modal

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have an application ready with layout itself, and inside this layout I use the fancybox. But now I'm forced to migrate to bootstrap and I'm using AdminLTE-2.1.1 to fit in what I want.

The big question is to migrate the parts with fancybox to the modal. In fancybox it was just declaring a class and giving options of the size of iframe and opened the page independently, as I show below:

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

Call the link:

<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');
  });
});

modal div:

<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>

external page div:

<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 laborious. But regardless, I prefer the migration, even because it would be an unprofessional job.

Is there no other plugin for bootstrap that calls the standalone page with the modal layout?

No jquery calls work in modal and look exactly 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");

jquery twitter-bootstrap jquery-datatables

asked by anonymous 22.11.2016 / 20:40

2 answers

Fill a select with callback $ getJson Asp.Net / JQuery [duplicate] How to display the GetAll data I performed in an HTML table? MVC C # HTML

score 1 · Answer 1

<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>

It seems that the div div is missing where the header and footer divs are located

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

score 1 · Answer 2

You can save the modals in separate files. Load the modal content by calling the 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 <a> tag with a link, but you can also use a <button> with an onclick event, etc.