Optimizar Diseño en Modal Bootstrap 3.3.7

pose el siguiente codigo:

<!-- MODA PLAN DE ACCION --> <div class="modal fade modal-default" id="modalPlanAccion">     <div class="modal-dialog modal-lg">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-window-close"></i></button>                 <h4 class="modal-title"><span class="badge bg-green" id="span_plan_accion"></span></h4>             </div>             <div class="modal-body">                 <form action="" role="form" id="formSac" autocomplete="off">                 <input type="hidden" id="idSac">                 <input type="hidden" id="accion">                 <div class="form-group">                     <label for="planAccion" class="value_required">Plan de Acción</label>                     <textarea name="planAccion" id="" rows="3" class="form-control"></textarea>                 </div>                 <div class="row">                     <div class="col-md-3">                         <div class="checkbox">                             <label for="recursoHumano">                                 <input type="checkbox" id="recursoHumano" name="recursoHumano">Recurso Humano                             </label>                         </div>                     </div>                     <div class="col-md-3" style="display:none;" id="div_humano">                         <div class="form-group">                             <label for="detalleRecursoHumano" class="value_required">Detalle</label>                             <input type="text" name="detalleRecursoHumano" id="detalleRecursoHumano" class="form-control">                         </div>                     </div>                     <div class="col-md-3">                         <div class="checkbox">                             <label for="recursoTecnico">                                 <input type="checkbox" id="recursoTecnico" name="recursoTecnico">Recurso Tecnico                             </label>                         </div>                     </div>                     <div class="col-md-3" style="display:none;" id="div_tecnico">                         <div class="form-group">                             <label for="detalleRecursoTecnico" class="value_required">Detalle</label>                             <input type="text" name="detalleRecursoTecnico" id="detalleRecursoTecnico" class="form-control">                         </div>                     </div>                 </div>                 <div class="row">                     <div class="col-md-3">                         <div class="checkbox">                             <label for="recursoFinanciero">                                 <input type="checkbox" id="recursoFinanciero" name="recursoFinanciero">Recurso Financiero                             </label>                         </div>                     </div>                     <div class="col-md-3" style="display:none;" id="div_financiero">                         <div class="form-group">                             <label for="detalleRecursoFinanciero" class="value_required">Detalle</label>                             <input type="text" name="detalleRecursoFinanciero" id="detalleRecursoFinanciero" class="form-control">                         </div>                     </div>                 </div>                 <button type="button" class="btn btn-info btn-xs" onclick="agregarFila();"><i class="fa fa-plus-square-o"></i> Agregar Fila</button>                  <!-- GRID PLAN ACCION -->                 <table id="grid_plan_accion"></table>                 <div id="pager_plan_accion"></div>                  <div class="row">                     <div class="col-md-4">                         <label style="color:red;">*Campos Obligatorios </label>                     </div>                 </div>                  </form>             </div>             <div class="modal-footer">                 <button type="button" class="btn btn-primary" onclick="confirmarGrabarplanAccion();">                     <i class="fa fa-check-square-o">&nbsp;Grabar Datos</i>                 </button>                 <!-- pull-left determina posicion-->                 <button type="button" class="btn btn-danger " data-dismiss="modal">                     <i class="fa fa-close">&nbsp; Salir</i>                  </button>             </div>         </div>         <!-- /.modal-content -->     </div>     <!-- /.modal-dialog --> </div> 

dicho código genera la siguiente vista(modal):

introducir la descripción de la imagen aquí ahora cuestion es que ocupa demasiado espacio la parte de checkbox como podria mejorar o optimar/aprovechar los espacios.

Al hacer click en un checkbox muestra un input y asi con cualquiera de ellos agradezco cualquier sugerencia.

Criando um modal bootstrap dentro de um função Jquery

Estou criando um sistema e aṕos fazer o carregamento no tbody da tabela funcionar via Jquery funcionar veio outra duvida. Preciso no caso que dois desses TD’s carreguem modais através de um botão, o que gostaria de saber é se da pra fazer isso dentro de uma função Jquery ou terei que fazer de outro jeito.

Segue abaixo o código que estou tentando desenvolver

<!DOCTYPE html> <html>  <head>    <meta charset="windows-1252" />    <meta name="authors" content="CGR - Governança"/>    <meta http-equiv="X-UA-Compatible" content="ie=11">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">       <!-- Font Awesome -->      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">   <!-- Ionicons -->   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">    <!--CSS Bootstrap e Próprios-->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"><!--BootStrap-->   <link rel="stylesheet" type="text/css" href="../LIB/CSS/newPages.css"/><!--CSS Adicional-->    <!-- jQuery library -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <!-- Popper JS -->   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>    <!-- Latest compiled JavaScript -->   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>      <style type="text/css">     body {          background-color: #F0F8FF;     }       </style>     <script  type="text/javascript">         let data = [         {cod: '01',operadora: 'OI', sigla: 'OI',observacao: 'TESTE'},         {cod: '02',operadora: 'TIM', sigla: 'TIM',observacao: 'TESTE 2'},         {cod: '03',operadora: 'TELEFONICA',sigla: 'TEL',observacao: 'TESTE 3'}];           $  (document).ready( function() {                       var operadoras = ""; //Variavel Operadora que será montada                        for (var i = 0; i < data.length ; i++) {                         operadoras += `                             <tr>                                  <td>$  {data[i].cod}</td>                                 <td>$  {data[i].operadora}</td>                                  <td>$  {data[i].sigla}</td>                                  <td>$  {data[i].observacao}</td>                                   <td>                                    <button type='button' title='Editar' class='btn btn-link' data-toggle='modal' data-target='#myomdalAlterar$  {data[i].cod}' id='btnEdit'>                                      <i class='fa fa-cut' style='font-size:20px; color:#0066F8;'></i>                                     </button>                                 </td>                                  <td>                                   <button type='button' title='Excluir' class='btn btn-link' id='btnExclui' data-toggle='modal' data-target='#myModalExcluir$  {data[i].cod}'>                                     <i class='fa fa-eraser' style='font-size:20px; color:#0066F8;'></i>                                   </button>                                 </td>                                   <!--//Modal de Alteração-->                                 <div id='myModalAlterar$  {data[i].cod}' class='modal fade' role='dialog'>                                      <!--//Dialog-->                                      <div class = 'modal-dialog' style='max-width: 1350px !important; max-height: 900px !important;' role='document'>                                          <!--//Content-->                                         <div class='modal-content'>                                             <!--//Modal Header-->                                             <div class='modal-header' style='background-color: #066fa8; padding: 2px 16px; color: #FFFFFF'>                                                 <h5 class='modal-title' style='color: #F8F8FF;'>                                                     <b>Registro nº $  {data[i].id}</b>                                                 </h5>                                                  <button type='button' class='close' data-dismiss='modal' aria-label='Close'>                                                   <span aria-hidden='true'>X</span>                                                 </button>                                             </div><!--//fim do Modal Header-->                                                <!--Modal Body -->                                             <div class='modal-body' style='height: 650px; background-color: #DCDCDC;'>                                                 <!--//Aqui irá o atalho para a página de alteração em PHP-->                                             </div><!--//Fim do Modal-Body-->                                                  <!--//Modal Footer-->                                             <div class='modal-footer' style='background-color: #066fa8; padding: 2px 16px; color: #FFFFFF'>                                                 <h6 style='color: white;'>Centro de Gerenciamento de Rede - CETEC 27</h6>                                             </div><!--//Fim do Modal Footer-->                                          </div><!--//Fim do Content-->                                         </div><<!--//Fim do Dialog-->                                  </div><!--//Fim do Modal-->                               </tr>                       `;                     }                    //Preenche a tabela                   $  ("#exiOperadoras").html(operadoras);                   });     </script>     </head>     <body>     <br>           <table class="table table-striped table-bordered">          <thead class="bg-primary">             <tr>                 <th>ID</th>                 <th>Nome da Operadora</th>                 <th>Sigla</th>                 <th>Obs</th>                 <th>Alterar</th>                 <th>Excluir</th>                     </tr>            </thead>              <tbody id="exiOperadoras">             </tbody>           </table>     </body>     </html> 

No caso, estou jogando o Modal dentro da função Jquery. Existe uma maneira dele funcionar? Já que ele nao está abrindo.

Definable modal logics in first-order structures

Suppose $ X$ is a set, $ \mathcal{W}$ is a family of subsets of $ X$ , and $ \mu:\mathcal{W}\rightarrow\mathcal{W}$ is an operation on those sets. There is a natural way to assign a modal logic to the tuple $ (X,\mathcal{W},\mu)$ by thinking of propositional atoms as elements of $ \mathcal{W}$ , the modality “$ \Diamond$ ” as the map $ \mu$ , and the Booleans as the corresponding set operations. As examples, consider:

  • The Tarski/McKinsey topological semantics: $ X$ is the set of points in some topological space $ \mathbb{X}$ , $ \mathcal{W}=\mathcal{P}(X)$ , and $ \mu(A)=cl(A)$ (in the sense of $ \mathbb{X}$ ). This was initially used to study S4 but is useful much more broadly (see e.g. Bezhanishvili, Gabelaia, and Lucero-Bryan on modal logics of metric spaces).

  • Esakia’s topological semantics: $ X$ and $ \mathcal{W}$ are as above, but $ \mu(A)$ is the set of limit points of $ A$ . This behaves quite differently from the Tarski/McKinsey approach, and in fact winds up giving various characterizations of provability logic via this semantics (see e.g. this survey by Beklemishev and Gabelaia).

(Actually, I’m not familiar with any approach along these lines which isn’t at least somewhat topology flavored, but I’m really not familiar with the literature at all.) Note that $ \mathcal{W}$ hasn’t played a role yet.

In each of the above cases, $ \Diamond$ winds up being a “reasonably definable” operation on sets. Committing fully to definability – this is where $ \mathcal{W}$ enters the picture – we can look at what happens in a more model-theoretic context:

Suppose $ \mathcal{M}$ is a first-order structure and $ \varphi(x,X)$ is a formula with parameters from $ \mathcal{M}$ in the language of $ \mathcal{M}$ together with “$ \in$ (where $ x$ is an object variable and $ X$ is a set variable). We let $ L_\mathcal{M}(\varphi)$ be the logic defined along the lines above by taking $ X=\mathcal{M}$ , $ \mathcal{W}$ to be the set of definable subsets of $ \mathcal{M}$ , and $ $ \mu:A\rightarrow \{m: \varphi(m, A)\}.$ $

I’m interested in how (if at all!) the class of logics of the form $ L_\mathcal{M}(\varphi)$ reflects the model theory of $ \mathcal{M}$ in the usual sense. Now, this seems like quite a hard problem in general, so I’m currently focusing on the following simpler instance:

General problem: given a modal formula $ \pi$ and a structure $ \mathcal{M}$ , determine whether $ \pi\in L_\mathcal{M}(\varphi)$ for some appropriate formula $ \varphi$ .

(Call such a $ \pi$ “enforceable over $ \mathcal{M}$ .”)

I was initially thinking of this as an easy starter problem, but it seems harder than I thought. The only situations I really understand are trivial or totally artificial. But I’m not sure how much of this is actual difficulty versus my own inexperience. To set myself straight, I’d like to ask about the following very specific case:

Actual question. Is every modal formula enforceable over the structure $ (\mathbb{N}; +,\times)$ ?

I’m actually not sure what answer I expect; I’m used to thinking of arithmetic as being able to “do everything” and exhibit maximally nasty behavior but that intuition actually seems to cut both ways here.


And, as always, I’m lacking for sources and probably reinventing the wheel – any references are much appreciated!

Abrir um modal ao redirecionar pagina

No meu sistema há um modal (pagina principal) que quando o usuario clica, aparece algumas linhas para editar algumas informações.

Ao editar essas informações, quero que ao redirecionar a pagina novamente para a principal, ele ja abra o modal com as informações, como posso fazer isso ?

Estou usando o framework materialize no meu site.

Código de onde faz o edit no banco de dados e o redirecionamento

<?php  session_start(); include_once '../../conecta_banco.php';  //botao com o name alterar   $  envia = filter_input (INPUT_GET, 'editar', FILTER_SANITIZE_STRING);  //botao cadastrar if($  envia){     //recupera os dados do form     $  id = filter_input(INPUT_GET, 'id', FILTER_SANITIZE_NUMBER_INT);     $  endereco_ip = filter_input (INPUT_GET, 'endereco_ip', FILTER_SANITIZE_STRING);     $  unidade = filter_input (INPUT_GET, 'unidade_fk', FILTER_SANITIZE_STRING);     $  descricao = filter_input (INPUT_GET, 'descricao', FILTER_SANITIZE_STRING);     $  hostname = filter_input (INPUT_GET, 'hostname', FILTER_SANITIZE_STRING);       $  query="UPDATE serv_impressao set endereco_ip = :endereco_ip, unidade_fk = :unidade_fk, descricao = :descricao, hostname = :hostname WHERE id = ".$  id." ";     $  atualiza = $  conecta->prepare($  query);     $  atualiza->bindParam(':endereco_ip', $  endereco_ip);     $  atualiza->bindParam(':unidade_fk', $  unidade);     $  atualiza->bindParam(':descricao', $  descricao);     $  atualiza->bindParam(':hostname', $  hostname);     if($  atualiza->execute()){         header("Location: ../../view/consulta_rapida.php");                 }else{         header("Location: cadastroErro.php");     }  }else{     echo 'erro ao executar a query'; } 

?>

o id para chamar o modal que eu quero é “modalImpressao”. Usei o seguinte código no console do navegador e abriu o modal que eu queria, gostaria de saber onde aplica-lo no meu site para fazer o que eu quero.

$  ('#modalImpressao').modal('open'); 

php if en modal de bootstrap 4

algo me tiene confundido .. tengo una modal que muestra un botón … esta relacionado en el id de una publicación .. la modal si me trae el id porq las acciones de eliminar modificar y publicar funcionan bien.. pero al momento de colocar un if dentro de la modal no funciona … la idea es q si el id es 0 no muestre .. si es 1 muestre ..

<?php    if($  row['estatus'] == '0'){?>                <button type="button" id="<?php echo $  row['servicio_id'];?>" class="btn btn-outline-info changeServicio" data-toggle="modal" data-target=".MostrarS" name="mostrar">no mostrar</button>   <?php }else{ ?>  <button type="button" id="<?php echo $  row['servicio_id'];?>" class="btn btn-outline-info changeServicio" data-toggle="modal" data-target=".MostrarS" name="publicado">Mostrar</button>   <?php } ?>

cuando coloco el cod fuera de la modal funciona perfectamente pero dentro de la modal no .. porq pasa esto ?

<a href="" data-toggle="modal"  data-target="#exampleModal" id="<?php echo $  row['servicio_id']; ?>" class=" material-icons detalles"><span class="glyphicon glyphicon-search"></span> settings

Add ng-click in Modal Edit

If find this plnkr for my requirement in the Same I need Some Function to add called add ng-click in boostrap modal too

<div ng-controller="MyCtrl">   <input ng-model="someInput">   <button ng-click="add()">Add</button>   <p ng-repeat="item in items">Created {{ item }}</p>   </div>  <textarea my-text="">  </textarea> 

Anyhelp !

Expandable rows, quick view or modal to show a big section with details for a row in a table?

I have a table and in the first version of implementation, I had expandable rows with info. In the new version, the client wants expandable sections in the section expanded because it is a lot of info.

What is the best option, in this case, expandable rows (with other expandable sections inside/ just the text), quick view or modal? What case offers a better user experience?

I will add some photos from https://uxdesign.cc/design-better-data-tables-4ecc99d23356 as details for the three cases. enter image description here

enter image description here

enter image description here

Modal Bootstrap sobreposto ao background escuro em requisição sem reflesh

Olá senhores programadores, estou com uma dificuldade em implantar um modal em uma chamada de dados que ficarão ocultos. Por exemplo, tenho uma paginação em ajax que funciona corretamente, mas ao implantar um modal para chamar algumas informações ele até aparece , mas em posição no topo e fica por baixo da tela escura quando chama o modal e quando chamo outros dados ele só fica no topo, e tentei fazer a chamada com load mas sem sucesso, pois o script usa $ .ajax junto co $ ajaComplete, e segue o código:

OBS: Notem que funciona normalmente a chamada do modal , pois o exemplo daqui esta dentro da mesma página index, mas meu exemplo do do admin tem 3 arquivos 1º página chamada busca refinada.php ondectem o formulário onde faz o filtro de busca. 2º filtrando busca .php onde pego os dados vias post e envio para o script ajax com php dando um echo junto a url. 3º dados refina busca .php é aonde serão vindos os dados coletados do banco. Até ai funciona normalmente mas o modal abre só no topo e por baixo da tela de efeito escura do bootstrap, e acredito por ser assíncromo o modal não aceita, mas em outro projeto usando o load ele funciona normalmente. Teria como eu adaptar um load nesse código Ajax Se alguém puder me ajudar , agradeço.

OBS: Minha paginação é sem reload na página.

Foto com o erro do Modal

$  (document).ready(function(){ //função para mostrar o loading function loading_show(){  } //função para esconder o loading function loading_hide(){ $  ('#loading').fadeOut('fast'); }  function fundo_loading_hide (){ $  ('#fundo_loading').fadeIn('fast');	 } function fundo_loading(){ $  ('#fundo_loading').fadeOut('fast');	 } function loading_show_imoveis(){  } function loading_hide_imoveis(){ $  ('#loading_imoveis').fadeOut('fast'); $  ('#fundo_loading').fadeOut('fast'); }    function loadData(page){ fundo_loading_hide(); loading_show();      loading_show_imoveis();                $  .ajax({ type: "POST", url: "dados_filtrando_busca.php?codigo=<?php echo $  codigo;?>&finalidade=<?php echo $  finalidade;?>&tipo=<?php echo $  tipo_id_3;?>&endereco=<?php echo $  endereco_id_3 ;?>&bairro=<?php echo $  bairro_id_3;?>&cidade=<?php echo $  cidade_id_3;?>&valor=<?php echo $  valor;?>", data: "page="+page, success: function(msg){ $  ("#container").ajaxComplete(function(event, request, settings){ fundo_loading(); loading_hide(); loading_hide_imoveis(); $  ("#container").html(msg); $  ("#myModalfavoritos").html(msg); }); } }); } loadData(1);  // For first time page load default results $  ('#container .pagination_topo li.active').live('click',function(){ var page = $  (this).attr('p'); loadData(page); });  loadData(1);  // For first time page load default results $  ('#container .pagination_rodape li.active').live('click',function(){ var page = $  (this).attr('p'); loadData(page); });  $  ('#go_btn').live('click',function(){ var page = parseInt($  ('.goto').val()); var no_of_pages = parseInt($  ('.total_pagina_topo').attr('a')); if(page != 0 && page <= no_of_pages){ loadData(page); }else{ alert('Entre com o número da página : Total de Páginas '+no_of_pages); return false; }    }); $  ('#go_btn_rodape').live('click',function(){ var page = parseInt($  ('.goto_rodape').val()); var no_of_pages = parseInt($  ('.total_pagina_rodape').attr('a')); if(page != 0 && page <= no_of_pages){ loadData(page); }else{ alert('Entre com o número da página : Total de Páginas'+no_of_pages); return false; }    }); });
.modal { z-index:-2;} .codigo_busca{background: rgba(10,89,137,0.78);background: -moz-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(10,89,137,0.78)), color-stop(100%, rgba(10,89,137,0.7))); background: -webkit-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%); background: -o-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%); background: -ms-linear-gradient(top, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%); background: linear-gradient(to bottom, rgba(10,89,137,0.78) 0%, rgba(10,89,137,0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a5989', endColorstr='#0a5989', GradientType=0 );color:#FFF; padding:10px; text-align:center; border-radius:5px 5px 0px 0px;} .result_busca { position:relative; margin:0 auto;text-align:center;} .result_busca .btn-success{ width:50%;} .busca_filtro{ width:28%; position:relative; font-size:1.0em; font-family: Arial, Helvetica, sans-serif; font-weight:400; min-width:300px; margin:-15px 36.5% auto; height:40px;background-color:#46F; padding:9px;} .busca_filtro a,.form_busca_filtrada_botao a{ color:#FFF;} .busca_filtro:hover{ background-color:#16F;color:#FFF;}.  .form_busca_filtrada_botao{ width:31%; font-size:1.0em; font-family: Arial, Helvetica, sans-serif; font-weight:400; background-color:#F00;width:30%;  height:38px; padding:9px;} .form_busca_filtrada_botao { position:relative; background-color:#003366;width:60%; margin:-90px 20% auto;border-radius:5px 5px 0px 0px; padding:10px;} .form_busca_filtrada{ width:60%; margin:-34px auto; border: 1px solid #003366; border-radius:0px 0px 5px 5px; padding:22px;} .form_busca_filtrada .btn-primary{ background-color:#F00;width:40%; margin:0 auto;} .fa-search{font-size:15px; right:25%;position:relative; top:2px;color:#FFF}  .foto_buscar{background-color:#F8F8F8; z-index:000000; height:270px;margin-top:33px; border-radius:5px; -moz-box-shadow:3px 3px 5px 4px #ccc;   -webkit-box-shadow: 3px 3px 5px 3px #ccc;   box-shadow:         2px 2px 2px 2px #CCC;} .foto_buscar img{ position:relative;top:6px; left:20px;} .dados_busca_result{color:#000; font-weight: 400; text-align:left; margin-left:36%; position:relative; top:-135px; } .dados_busca_result_2{color:#000; font-weight: 400; text-align:left; margin-left:36%; position:relative; top:-277px; } .dados_busca_result_3{color:#000; font-weight: 400; text-align:left; margin-left:53%; position:relative; top:-419px; } .dados_busca_result span, .dados_busca_result_2 span,.dados_busca_result_3 span{color:#C00}  .dados_busca_result_edit{color:#333; font-weight: 400; text-align:left; margin-left:16%; position:relative; top:-260px;} .dados_busca_result_ativa{color:#333; font-weight: 400; text-align:left; margin-left:29%; position:relative; top:-295px;} .dados_busca_result_fotos{color:#333; font-weight: 400; text-align:left; margin-left:42%; position:relative; top:-329px;} .dados_busca_result_del{color:#333; font-weight: 400; text-align:left; margin-left:55%; position:relative; top:-363px;} .dados_busca_result_dest{color:#333; font-weight: 400; text-align:left; margin-left:68%; position:relative; top:-398px;} .dados_busca_result_edit .btn-success, .dados_busca_result_edit span{color:#FFF; width:140px;} .dados_busca_result_ativa .btn-primary, .dados_busca_result_ativa span{color:#FFF; width:140px;} .dados_busca_result_fotos .btn-warning, .dados_busca_result_fotos span{color:#FFF; width:140px;} .dados_busca_result_del .btn-danger, .dados_busca_result_del span{color:#FFF; width:140px;} .foto_buscar .pagination_rodape{ position:relative; margin:50px auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="container"></div>  <div id="loading_imoveis"></div> <div class="data"></div>  </div><br /><br /><br /><br />     <img src="https://www.jcimoveisbrasil.com/images/c_1.jpg" width="180" height="135" /> <div class="dados_busca_result">Código: <span>001</span></div> <div class="dados_busca_result">Negócio: <span>venda</span></div> <div class="dados_busca_result">Tipo: <span>apto</span></div> <div class="dados_busca_result">Garagem: <span>Garagem:</span></div> <div class="dados_busca_result">Dormitórios: <span>Dormitórios:</span></div> <div class="dados_busca_result">Suítes: <span>Suítes:</span></div> <div class="dados_busca_result">Banheiros: <span>Banheiros:</span></div>    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalLongoExemplo">   Abrir endereço secreto </button>  <!-- Modal --> <div class="modal fade" id="ModalLongoExemplo" tabindex="-1" role="dialog" aria-labelledby="TituloModalLongoExemplo" aria-hidden="true">   <div class="modal-dialog" role="document">     <div class="modal-content">       <div class="modal-header">         <h5 class="modal-title" id="TituloModalLongoExemplo">ID ANÚNCIO 001</h5>         <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">           <span aria-hidden="true">&times;</span>         </button>       </div>       <div class="modal-body">        Rua da Conquista nº 10       </div>       <div class="modal-footer">         <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>         <button type="button" class="btn btn-primary">Salvar mudanças</button>       </div>     </div>

How do I trigger a modal from a template that points to a controller returning an AJAX response

I am trying to trigger a modal from a twig. The path of the modal is a controller that returns an AJAX response as below:

Routing code

usgbc_myaccount.get_badges_evidence_controller: path: '/account/get-badges-evidence/{badge_type}' defaults: _controller:  '\Drupal\usgbc_myaccount\Controller\GetBadgesEvidenceController::getEvidence' _title: ''  requirements: _permission: 'access content' _format: 'html' 

Controller code

namespace Drupal\usgbc_myaccount\Controller;    class GetBadgesEvidenceController extends ControllerBase  {    /** * @return AjaxResponse */ public function getEvidence($  badge_type)  {         $  options = [       'width' => '50%',     ];      $  response = new AjaxResponse();     $  response->addCommand(new OpenModalDialogCommand(t('Modal title'),   $  badge_type , $  options));      return $  response; } } 

Call to router from twig template

<a class="use-ajax popup-dialog-class" data-type="modal" href="{{  path('usgbc_myaccount.get_badges_evidence_controller', {'badge_type':  result.badge_type}) }}" data-dialog-type="modal">{{ 'Read more'|t }}</a> 

When I click on the link I get the response in JSON in text area on another page. What is missing? It the approach correct? Any help will be appreciated.

Thanks

Preview of an widget setting in a modal

I got this problem with setting up the modal for a widget preview. Lets say I want to edit a widget and Im opening modal with the widget settings. The modal contains both settings and preview of the widget that Im editing, like this:

  • widget settings
  • preview
  • Save / Preview button

The problem is, the preview makes the whole modal to high, so the buttons for save/preview disappears outside the screen.. so each time I want to save/preview I need to scroll the modal.

Do you think that better solution would be to move Save/preview buttons above the preview, so the user would be in control all the time, and only scroll the modal to see full preview?

Any really would be very welcome!

cheers! Mark