Janela Modal só abre e não fecha

Tenho uma janela modal dentro de uma div, ao passar o mouse em cima, eu faço com que a div mude de cor e abre uma janela modal com foto, o problema é que essa janela modal só abre, e simplesmente não fecha. Alguém pode me ajudar com isto, não sei mais a quem recorrer.

<script>      function clique(img){        var modalJ=document.getElementById("janelaModal");        var modalI=document.getElementById("imgModal").src=["pg/CadastroUsuario.jpg"];        var modalB=document.getElementById("btFechar");          modalJ.style.display="block";        modalI.src=img;        modalB.onclick=function(){         modalJ.style.display="none";        }      }       </script>     <style type="text/css">         .servico:hover {          cursor: zoom-in;          background:orange;         }       </style> 

E aqui o código da div e da janela modal.

<article class="servico wow fadeInUp" onclick='clique("imgModal")';>         <a href="#" class="fadeImg"><img src="imag/monitor.png" alt="Logo do sistema"></a>     <div class="inner">              <a href="#"><center><h3>Tela Inicial</h3></center></a>     <h4>Uma empresa segura e com seus dados bem guardados, protegidos e também gerando uma rede de informações mais rápida!.</h4>     </div>            <div id="janelaModal">          <span id="btFechar">X</span>          <img id="imgModal">              </div>           </article> 

Como fazer modal aparecer só uma vez de acordo com o check?

Eu gostaria de alcançar o seguinte:

  • No carregamento da página inicial, exiba a caixa modal
  • Dentro da caixa modal, exiba um formulário com uma única caixa de seleção obrigatória
  • Ao marcar a caixa de seleção, clique em enviar e feche a caixa modal, vá para a página inicial
  • Lembre-se dessa preferência de seleção de caixa de seleção usando um cookie
  • Quando os usuários retornam à página inicial, se marcarem a caixa de seleção, a caixa modal não será exibida

Eu já fiz a modal com o formulário mas nao sei como manipulo o cookie pra pegar o resultado do click no check

Chamada da modal:

var openModal = document.getElementById(‘open-modal’); var modal = document.getElementById(‘modal-1’); var closeModal = document.getElementsByClassName(‘close-modal’)[0];

openModal.addEventListener(‘click’, function(){ modal.classList.toggle(‘visible’); });

closeModal.addEventListener(‘click’, function(){ modal.classList.remove(‘visible’); });

HTML da modal:

<button id="open-modal" class="button alert triger-modal" data-triger="modal-1" style="display: none">Open Modal</button>     <div class="modal-wrap visible" id="modal-1">         <div class="modal-dialog">       <div class="modal-container">         <div class="modal-header">           <h2 class="modal-title">Tutorial de Primeiro Acesso!</h2>           <button class="close-modal">&times;</button>         </div>         <div class="modal-content">           <img src="../../repo/files/:public:KnowSolutionsDashboard:Embed:tutorial.gif" style="display:block;margin:auto;" alt="Tutorial de Primeiro Acesso" /><br/>            <label style="position:relative;z-index:99999;"><input type="checkbox" name="mensagem" id="tutorial" value="1" >Não mostrar essa mensagem novamente</label> <br>           </div>          </div>       </div>     </div>  

Modal que aparece uma vez

Tenho uma modal que quando o cursor do mouse sai da pagina ele aparece uma modal, porém toda vez que sai da pagina ele fica aparecendo, gostaria de saber se há como verificar que a partir do momento que apareceu uma vez ele nao aparece mais ate que de um refresh na pagina? Somente utilizando o HTML e JS

<!DOCTYPE html> <html lang="en" onmouseleave="abreModal()">    <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <link rel="stylesheet" href="style.css">     <title>Document</title>    <script type="text/javascript">         function abreModal() {           opsc = document.getElementById("openModal").style.opacity = "1";           disp = document.getElementById("openModal").style.display =                   "block";       }       function fechaModal(){           opsc =  document.getElementById("openModal").style.opacity = "0";           disp =  document.getElementById("openModal").style.display =                    "none";       }       </script>    </head>   <body>     <div id="openModal" class="modalDialog">       <div>          <a href="#close" title="Close" onclick="fechaModal();"                   class="close">X</a>         <h2>Modal Box</h2>         <p>1 paragrafo.</p>         <p>teste teste teste  teste teste teste v</p>       </div>      </div>       </body>     </html>  

Modal or new Page for product description?

I have a question it’s kind of research and I have researched a few before posting but I want direct pros and cons for my concerns thus I am posting this question here.

I have a page which has a sort of gallery of recipes upon which if I click on a modal is opening for the detail in detail I have a recipe video, it’s directions and ingredients then they have few tabs for nutrition values comments on the recipe.

My concern is which is best for the above layout a Modal or a new page? What are the pros and cons of having a modal here?

I got a sort of answer here and did a sort of research but they have listed for general concern I am looking for specific pros and cons.

Thanks for the help 🙂

Sending variable to a bootstrap modal

I have seen this asked before but a lot of the answers I found where people looking to get a variable into a modal to query a database. However thats not what I want. I just want to send a variable into s modal.

Here is my button the activated the bootstrap modal

<button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModalNorm" data-id="<?php echo "$  issueid";?>">Add New Followup</a> 

Then I have a modal code as below. I want the value from data-id to show in the text box named caseid

    <!-- Modal --> <div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"       aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">             <!-- Modal Header -->             <div class="modal-header">                 <button type="button" class="close"                     data-dismiss="modal">                        <span aria-hidden="true">&times;</span>                        <span class="sr-only">Close</span>                 </button>                 <h4 class="modal-title" id="myModalLabel">                     Modal title                 </h4>             </div>              <!-- Modal Body -->             <div class="modal-body">                 <form role="form" method="POST" action="./view_customer?cid=<?php echo "$  cid";?>">                   <input type="text" id="casenoteid" name="caseid" />                   <div class="form-group">                     <label for="exampleInputEmail1">The Issue</label>                       <input type="text" class="form-control" name="issuenote" id="issuenote"/>                   </div>                   <input type="submit" class="btn btn-default" value="SAVE NOTE" name="savenote">                 </form>               </div>              <!-- Modal Footer -->             <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> 

then I have the jquery

  <script>       $  (document).ready(function(){              $  ('#myModal').on('show.bs.modal', function (e) {                    var rowid = $  (e.relatedTarget).data('casenoteid');                 });           });       });   </script> 

How to display a form in modal dialog on page load?

This is on Drupal 8.6, PHP 7.2, Theme is based on Bootstrap.

The scenario is, I want to display a dialog box with a subscription form in the home page. The dialog box will be loaded automatically when page load, not by click any link. I see there are lot of examples there in the net, but all related to by clicking a link, modal will display. But I want to load it without any click.

I partially successful by using BootstrapDialog, but ajax is not working on form submit button. What I did, I attach a js file in the front page, with the code below. It shows the Modal Dialog box, and I tuned a page–newsletter–subscribe.html.twig, its working But submit button not working not ajax is working.

    BootstrapDialog.show({     title: 'Subscribe To Newsletter',     message: jQuery('<div></div>').load('/newsletter/subscribe'),     closable: false,     draggable: true,     closeByBackdrop: false,     closeByKeyboard: false,     buttons: [{         label: 'Close',         action: function(dialogRef){             dialogRef.close();         }     }] }); 

I saw there is an example in code node.preview.js file like this:

          var $  previewDialog = $  ('<div>' + Drupal.theme('nodePreviewModal') + '</div>').appendTo('body');       Drupal.dialog($  previewDialog, {         title: Drupal.t('Leave preview?'),         buttons: [{           text: Drupal.t('Cancel'),           click: function click() {             $  (this).dialog('close');           }         }, {           text: Drupal.t('Leave preview'),           click: function click() {             window.top.location.href = event.target.href;           }         }]       }).showModal(); 

But I never able to make it working in my custom module.

If some one can help on this, will be really great!

No consigo que una ventana modal de Bootstrap 4 se abra con JQuery

Tengo varias ventanas modales en una view de CodeIgniter y no consigo que se vean cuando intento abrirlas usando JQuery. Lo he intentado con .modal(‘toggle’) y .modal(‘show’) sin éxito. Si uso un button con data-toogle y data-target funciona sin problemas. Por lo que he visto usando el inspector de código de Chrome y por algunos detalles que percibo en la página, cuando hago clic para que se abra la ventana modal la página actua como si se hubiera abierto pero no me la muestra. Veo que en la etiqueta body aparece la class modal-open pero no se ve la ventana aparecer.

Os pongo aqui parte del código.

El de una de las ventanas modales:

   <!-- MODAL EDIT -->     <form>         <div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">           <div class="modal-dialog modal-lg" role="document">             <div class="modal-content">               <div class="modal-header">                 <h5 class="modal-title" id="exampleModalLabel">Editar Cliente</h5>                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">                   <span aria-hidden="true">&times;</span>                 </button>               </div>               <input type="hidden" name="cliente_id_edit" id="cliente_id_edit">               <div class="modal-body">                     <div class="form-group row">                         <label class="col-md-2 col-form-label">Código</label>                         <div class="col-md-10">                           <input type="text" name="codigo_cliente_edit" id="codigo_cliente_edit" class="form-control" placeholder="Código do cliente">                         </div>                     </div>                     <div class="form-group row">                         <label class="col-md-2 col-form-label">Nome</label>                         <div class="col-md-10">                           <input type="text" name="nome_cliente_edit" id="nome_cliente_edit" class="form-control" placeholder="Nome do cliente">                         </div>                     </div>                     <div class="form-group row">                         <label class="col-md-2 col-form-label">CPF</label>                         <div class="col-md-10">                           <input type="text" name="cpf_cliente_edit" id="cpf_cliente_edit" class="form-control" placeholder="CPF do cliente">                         </div>                     </div>                     <div class="form-group row">                         <label class="col-md-2 col-form-label">Sexo</label>                         <div class="col-md-10">                             <div class="form-check-inline form-check">                                 <label for="sexo1" class="form-check-label ">                                     <input type="radio" id="sexo1_edit" name="sexo_cliente_edit" value="F" class="form-check-input">F                                 </label>&nbsp;&nbsp;                                 <label for="sexo2" class="form-check-label ">                                     <input type="radio" id="sexo2_edit" name="sexo_cliente_edit" value="M" class="form-check-input">M                                 </label>                             </div>                         </div>                     </div>                     <div class="form-group row">                         <label class="col-md-2 col-form-label">E-mail</label>                         <div class="col-md-10">                           <input type="text" name="email_cliente_edit" id="email_cliente_edit" class="form-control" placeholder="E-mail do cliente">                         </div>                     </div>               </div>               <div class="modal-footer">                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>                 <button type="button" type="submit" id="btn_update" class="btn btn-primary">Enviar</button>               </div>             </div>           </div>         </div>         </form>     <!--END MODAL EDIT--> 

El código JQuery que tendría que abrir la ventana modal:

    $  ('#show_data').on('click','.item_edit',function(){           $  ('#Modal_Edit').modal('show');      }); 

El evento que dispara la ejecución del JQuery:

<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-codigo_cliente="001" data-nome_cliente="Luis" data-cpf_cliente="123456789" data-sexo_cliente="M" data-email_cliente="mail@mail.com" data-cliente_id="1">Editar</a> 

Gracias por la ayuda.

ECK form in ctools modal doesn’t behave in a familiar way

I use extensively ctools modal for entity creation/editing. I’m now integrating an ECK entity but the behavior is not consistent with other entity types (node, group, etc.)

Typically when saving an entity in a ctools modal the form state is altered and I check with something like if (!empty($ form_state['executed']) && empty($ form_state['rebuild'])) to see if the form has been submitted. With this information I can close the modal and replace some elements on the page. However, with this ECK entity, $ form_state['executed'] and $ form_state['rebuild'] are exactly the same before and after form submission.

Of note is that, for now, I’ve commented out the built-in ECK redirect logic – that’s another issue I’ll have to come back to. In eck__entity__form_submit() I’ve commented out $ state['redirect'] = $ uri['path']; as a redirect is not what I wanted.

With the commented out redirect, the form submission works: An entity is created, the content within the modal is updated to show a success message (message is generated by ECK module).

Here is the code within the page callback that displays the modal:

$  form = eck__entity__add('external_user', 'external_user'); $  title = t('Add external speaker');  //  $  commands = array();  ctools_include('modal'); ctools_include('ajax'); // You can ignore some things, like this conditional, I've only done it for debugging purposes if (!isset($  form_state)) {   $  form_state = array(     'title' => $  title,     'ajax'  => TRUE,     'build_info' => array(       'args'  => [$  form['entity']['#value']]     ),   );    $  commands = ctools_modal_form_wrapper($  form['#form_id'], $  form_state); }  if (!empty($  form_state['executed']) && empty($  form_state['rebuild'])) {   // overwrite commands.   $  commands = array();    ctools_add_js('ajax-responder');   $  commands[] = ctools_modal_command_dismiss();   $  event_node = (object) [     'uid' => $  user->uid,     'name' => (isset($  user->name) ? $  user->name : ''),     'type' => 'event',     'language' => LANGUAGE_NONE,     'status' => 1,   ];   $  event_form = drupal_get_form('event_node_form', $  event_node);   $  field = $  event_form['og_group_ref'];   $  field['#attributes']['class'][] = 'selectpicker';   $  field[LANGUAGE_NONE][0]['default']['#value'] = [$  form_state['build_info']['args'][0]->nid];   $  commands[] = ajax_command_replace('[id^="edit-field-external-speaker-und"]', drupal_render($  field)); }  print ajax_render($  commands); exit; 

If I get hackish with it, I can use if (stripos($ commands[0]['output'], 'Status message') !== FALSE) { as my conditional and all works as expected.

The main question is, why is the $ form_state not being updated in the way I expect and is typical of other entity forms within a ctools modal?