Ir para conteúdo
filoh

Criar um popup interno de boas vindas no site

Recommended Posts

Como faço para criar uma mensagem ao entrar no meu site?

Por exemplo, quero botar um anuncio ao entrar no site, uma caixa quadrada com um botão de fechar normal. Deixando o site um pouco obscuro quando essa mensagem aparece.

 

No estilo como mostra na image anexada, porem sendo apenas uma mensagem, sem cadastro de newsletter.

d8f5e131da7d4f4ce3724fc8cf24b2f6ef7b15dd.JPG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso é conhecido como Modal. E fazer isso aparecer do jeito que você quer fazer faz com que perca a maior parte do público que acessaria seu website.

Além que isso fere as questões de boas práticas.

 

Enfim eu criei um script para executar essa aplicação (Não para o termo que você deseja mas pode ser usado nessa finalidade)

 

Salve o arquivo ModalShow.js e seu CSS encontrado nesse link, logo então adicione-os ao head do index:

https://github.com/Spell-Master/sm-web/tree/master/scripts/ModalShow

 

Então adicione a estrutura HTML para tal (desculpe até o momento não coloquei no repositório citado essa estrutura :tired:)

<div class="modal" id="id_que_voce_quiser">
    <div class="modal-box" style="max-width: 400px">
        <div class="modal-header"></div>
        <div class="modal-content" id="modal-load">
          Aqui você coloca o conteúdo do jeito que quiser
        </div>
    </div>
</div>
  • O #ID você quem escolhe como vai ser
  • A estilização da largura máxima você pode passar pelo style="....... no .modal-box. Do contrário a largura máxima é de 900pixels

Então somente depois da estrutura HTML criada você vai usar a classe JS

Sugiro que adicione no final do BODY...

<script>
   var janela = new ModalShow('id_que_voce_quiser', false);
  /*
  parâmetros: 
  1 - "id_que_voce_quiser" : É o id da estrutura HTML
  2 - "false" : É o conteúdo interno, mesmo que feche a janela o conteúdo não será apagado
  */

  janela.open('O título que você quiser', true);
  /*
  parâmetros: 
  1 - "O título que você quiser" : Título da janela
  2 - "true" : Quer dize que o botão de fechar deve ser exibido
  */
</script>

 

Sugiro que faça a personalização no CSS dos atributos, pois o arquivo CSS só contém o básico para a manipulação através do ModalShow.js

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Robson Augusto
      Boa tarde, se alguem conseguir me ajudar, desde ja agradeço...
       
      como fazer com que a função highligth funcione nesse codigo, ate então ela nao causou efeito algum no que preciso, que é destacar um anuncio, qaundo ativado a função de destacar, nao acontece nada.
       
       
       
       
       
       
      <?php } ?>
              <?php while(osc_has_items()) { ?>
      <div class="tab-pane fade in block-style active" id="block-style">
                              
                                         <div class="col-sm-4 block-style-item">
                                  <a href="<?php echo osc_item_url(); ?>" 
      class="wrap-item-block">
                                  <div class="item-block" id="<?php if(function_exists('payment_pro_print_highlight_class')){echo osc_run_hook("highlight_class");}?>">
                                          <div class="img">
                                          <?php if( osc_images_enabled_at_items() ) { ?>
                                              <?php if( osc_count_item_resources() ) { ?><img src="<?php echo osc_resource_thumbnail_url(); ?>"  alt="<?php echo osc_item_title(); ?>"/><?php } else { ?>
                                                      <img src="<?php echo osc_current_web_theme_url('img/no_photo.gif'); ?>" alt="" title="" />
                                                  <?php } ?>
                                                  <?php } ?>
                                          </div>
                                          <?php if( osc_get_preference('item-icon', 'fino') == 'enable') {?>
                                          <div class="icon">
                                      <img src="<?php echo osc_current_web_theme_url('img/') . fino_category_root(osc_item_category_id()) . '.png' ?>" alt="">
                                          </div>
                                          <?php } ?>
                                          <div class="text">
                                              <p class="title"><?php echo osc_item_title();  ?></p>
                                              <p class="price"><?php if( osc_price_enabled_at_items() && osc_item_category_price_enabled() ) { echo osc_item_formated_price(); }?></p>
                                          </div>
                                      </div>
                                  </a>
                              <!-- end item block -->
                              </div></div>
              <?php } ?>
    • Por Bruno S. Ferreira
      Boa noite
      No php eu posso fazer como no código exemplo
      <?php //EXEMPLO foreach (xxxx) { ?> conteúdo qualquer que poderia pegar um <?php $linha['campo sql']; ?> Mais conteúdo e aqui fechamos o conteúdo... <?php } ?> Dai no javascript se eu precisasse fazer parecido.. como eu poderia fazer???
       
      Vou por meu código aqui
      <p id="demo"></p> <script> // Set the date we're counting down to var countDownDate = new Date("<?php echo $mes."/".$dia."/".$ano;?> <?php echo $hora ?>").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = "Você tem <b style='font-size:20px;'>" + days + "d " + hours + "h " + minutes + "m " + seconds + "s </b>."; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; // AQUI DENTRO DESTE EXPIRED EU QUERIA COLOCAR TODO UM CÓDIGO HTML (GRANDE) //TERIA COMO EU FAR UMA PAUSA COMO FAÇO NO PHP E DEPOIS DO HTML // NO PHP EU FARIA <?PHP XXXXXXXXXXXXXXXXXXXXXX { ?> CONTEUDO E FECHA O PHP <?PHP } ?> //CHAMAR NOVAMENTEO O JAVA PRA CONTINUAR? OU SE EU COLOCAR TODO O HTML DENTRO DE UMA DIV.. //COMO EU CHAMARIA ESTA DIV AQUI? } }, 1000); </script>  
    • Por Diego Borin
      Ola amigos, boa tarde, como não manjo muito da linguagem HTML, peço humildemente uma simples ajuda dos amigos. Estou com um código HTML que gerei para um Formulário de Cadastro de email, onde incorporei ele numa pagina dentro do meu site, para apenas quem se cadastrar poder acessar o conteúdo, so que o problema que não consigo fechar essa janela do formulário, mesmo após cadastro ele fica aberto, queria que após o usuario digitar no caso seu E-mail e nome, quando ele clicar em "Subscrible", seja concluido o processo e essa tela do Formulario se feche, para o usuario poder ter acesso ao conteudo, entendem? Vou enviar o código para vocês analisarem e se puderem me ajudar fico muito grato, se quiser colocar ja o Texto em HTML que deve acrescentar para que funcione da forma que quero podem colocar por gentileza, dai so me falam aonde tem que colocar o texto e o que tem que colocar para eu já ficar sabendo numa próximo, assim fica até mais fácil pra mim, fico no aguardo, muito obrigado.
      ESTE É O CODIGO HTML:
       
      <!-- Begin Mailchimp Signup Form -->
      <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
      <style type="text/css">
          #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:700px;}
          /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
             We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
      </style>
      <div id="mc_embed_signup">
      <form action="https://estudioborin.us7.list-manage.com/subscribe/post?u=ba37986a121a69531dd8ca781&amp;id=7c624ccc19" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
          <div id="mc_embed_signup_scroll">
          <h2>Digite seu e-mail e seu nome para assistir Video Aula Gratuíta</h2>
      <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
      <div class="mc-field-group">
          <label for="mce-EMAIL">Digite seu E-mail aqui  <span class="asterisk">*</span>
      </label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
      </div>
      <div class="mc-field-group">
          <label for="mce-FNAME">Digite seu nome aqui  <span class="asterisk">*</span>
      </label>
          <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
      </div>
          <div id="mce-responses" class="clear">
              <div class="response" id="mce-error-response" style="display:none"></div>
              <div class="response" id="mce-success-response" style="display:none"></div>
          </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ba37986a121a69531dd8ca781_7c624ccc19" tabindex="-1" value=""></div>
          <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
          </div>
      </form>
      </div>
      <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text'; /**
       * Translated default messages for the $ validation plugin.
       * Locale: PT_PT
       */
      $.extend($.validator.messages, {
          required: "Campo de preenchimento obrigat&oacute;rio.",
          remote: "Por favor, corrija este campo.",
          email: "Por favor, introduza um endere&ccedil;o eletr&oacute;nico v&aacute;lido.",
          url: "Por favor, introduza um URL v&aacute;lido.",
          date: "Por favor, introduza uma data v&aacute;lida.",
          dateISO: "Por favor, introduza uma data v&aacute;lida (ISO).",
          number: "Por favor, introduza um n&uacute;mero v&aacute;lido.",
          digits: "Por favor, introduza apenas d&iacute;gitos.",
          creditcard: "Por favor, introduza um n&uacute;mero de cart&atilde;o de cr&eacute;dito v&aacute;lido.",
          equalTo: "Por favor, introduza de novo o mesmo valor.",
          accept: "Por favor, introduza um ficheiro com uma extens&atilde;o v&aacute;lida.",
          maxlength: $.validator.format("Por favor, n&atilde;o introduza mais do que {0} caracteres."),
          minlength: $.validator.format("Por favor, introduza pelo menos {0} caracteres."),
          rangelength: $.validator.format("Por favor, introduza entre {0} e {1} caracteres."),
          range: $.validator.format("Por favor, introduza um valor entre {0} e {1}."),
          max: $.validator.format("Por favor, introduza um valor menor ou igual a {0}."),
          min: $.validator.format("Por favor, introduza um valor maior ou igual a {0}.")
      });}(jQuery));var $mcj = jQuery.noConflict(true);</script>
      <!--End mc_embed_signup-->
    • Por glrtlucas
      Boa tarde pessoal,
       
      meu conhecimento em JS é bem limitado e estou apanhando para criar o seguinte:
       
      Tenho um acordeon horizontal de imagens feito em HTML que está funcionando normalmente, neste acordeon há 8 itens.
       
      Ao clicar em um dos itens gostaria que abrisse um lightbox com imagens referentes a aquele item aberto.
       
      Abaixo estarei disponibilizando o código para vocês darem uma olhada, o item musicalização está funcionando, mas o item corpo e movimento não. Estou testando primeiramente neste dois, tendo sucesso aí replicaria para os demais itens.
       
      Estou tentando fazer isto para utilizar no WordPress, procurei e não encontrei um plugin que faça exatamente o que preciso. Um acordeon e ao clicar em algum item abra um lightbox gallery das imagens referentes ao item, só achei plugin que façam isto separadamente.
       
      Agradeço desde já.
       
      <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; } .row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 25%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .cursor { cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; } .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* accordion */ .accordion { width: 100%; max-width: 1080px; height: 250px; overflow: hidden; margin: 50px auto; } .accordion ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; } .accordion ul li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 250px; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; } .accordion ul li div { display: block; overflow: hidden; width: 100%; } .accordion ul li div a { display: block; height: 250px; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; } .accordion ul li div a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease; } .accordion ul li div a h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 160px; } .accordion ul li div a p { top: 160px; font-size: 13.5px; } .accordion ul li:nth-child(1) { background-image: url("https://unsplash.it/650/250?image=680"); } .accordion ul li:nth-child(2) { background-image: url("https://unsplash.it/650/250?image=668"); } .accordion ul li:nth-child(3) { background-image: url("https://unsplash.it/650/250?image=659"); } .accordion ul li:nth-child(4) { background-image: url("https://unsplash.it/650/250?image=655"); } .accordion ul li:nth-child(5) { background-image: url("https://unsplash.it/650/250?image=657"); } .accordion ul li:nth-child(6) { background-image: url("https://unsplash.it/650/250?image=661"); } .accordion ul li:nth-child(7) { background-image: url("https://unsplash.it/650/250?image=665"); } .accordion ul li:nth-child(8) { background-image: url("https://unsplash.it/650/250?image=664"); } .accordion ul:hover li { width: 8%; } .accordion ul:hover li:hover { width: 60%; } .accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); } .accordion ul:hover li:hover a * { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 600px) { body { margin: 0; } .accordion { height: auto; } .accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover { position: relative; display: table; table-layout: fixed; width: 100%; -webkit-transition: none; transition: none; } } .about { text-align: center; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #666; } .about a { color: blue; text-decoration: none; } .about a:hover { text-decoration: underline; } </style> <body> <div id="accordion" class="accordion"> <ul> <li> <div> <a href="javascript:void(0)" onclick="openModal('musicalizacao');currentSlide(1)" class="hover-shadow cursor"> <h2 style="color:white;">Musicalizacao</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal('corpo-e-movimento');currentSlide(1)" class="hover-shadow cursor"> <h2 style="color:white;">Corpo e Movimento</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> <h2 style="color:white;">Teatro e Contação de Estórias</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> <h2 style="color:white;">Artes</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> <h2 style="color:white;">Aulas de Inglês</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> <h2 style="color:white;">Higiene Bucal</h2> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(5)" class="hover-shadow cursor"> <h2 style="color:white;">Capoeira</h2> <p>Extracurricular</p> </a> </div> </li> <li> <div> <a href="javascript:void(0)" onclick="openModal();currentSlide(6)" class="hover-shadow cursor"> <h2 style="color:white;">Ballet</h2> <p>Extracurricular</p> </a> </div> </li> </ul> </div> <!--<div class="row"> <div class="column"> <img src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> </div> </div>--> <!-- musicalizacao --> <div id="musicalizacao" class="modal"> <span class="close cursor" onclick="closeModal('musicalizacao')">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">5 / 5</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(1)" alt="Musicalizacao 1"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(2, 'Mus')" alt="Musicalizacao 2"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(3, 'Mus')" alt="Musicalizacao 3"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(4, 'Mus')" alt="Musicalizacao 4"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" id="Mus" onclick="currentSlide(5, 'Mus')" alt="Musicalizacao 5"> </div> </div> </div> <!-- /musicalizacao --> <!-- corpo-e-movimento --> <div id="corpo-e-movimento" class="modal"> <span class="close cursor" onclick="closeModal('corpo-e-movimento')">&times;</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Corpo e Movimento 1"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Corpo e Movimento 2"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Corpo e Movimento 3"> </div> <div class="column"> <img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Corpo e Movimento 4"> </div> </div> </div> <!-- /corpo-e-movimento --> <script> function openModal(id) { if(id === 'musicalizacao'){ document.getElementById('musicalizacao').style.display = "block"; document.getElementById('accordion').style.display = "none"; document.getElementById('masthead').style.display = "none"; } else { if(id === 'corpo-e-movimento') { document.getElementById('corpo-e-movimento').style.display = "block"; document.getElementById('accordion').style.display = "none"; document.getElementById('masthead').style.display = "none"; } } } function closeModal(id) { if(id === 'musicalizacao'){ document.getElementById('musicalizacao').style.display = "none"; document.getElementById('accordion').style.display = "block"; document.getElementById('masthead').style.display = "block"; } else { if(id === 'corpo-e-movimento'){ document.getElementById('corpo-e-movimento').style.display = "none"; document.getElementById('accordion').style.display = "block"; document.getElementById('masthead').style.display = "block"; } } } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n, item) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script> </body> </html>  
    • Por wellingtonmelo
      Olá pessoal, beleza?
       
      Entendo bem de HTML, CSS, Bootstrap, mas funções dinâmicas que necessitam de Javascript, Jquary etc, eu não sei nada.
       
      Consegui um script e estou testando, mas o resultado é exibido em uma DIV, e preciso que esse resultado seja exibido em um input, para que o programador possa pegar esse resultado e jogar no banco.
       
      Olha o código:
      <script type="text/javascript"> function clicar() { var num1 = document.querySelector(".num1").value; var num2 = document.querySelector(".num2").value; var num3 = document.querySelector(".num3").value; var num4 = document.querySelector(".num4").value; var resultado = parseInt(num1) - parseInt(num2) - parseInt(num3) - parseInt(num4); document.querySelector(".resultado").innerHTML = resultado; } </script> <style type="text/css"> .num1{ float: right; width: 70%} .num2{ float: right; width: 70%} .num3{ float: right; width: 70%} .num4{ float: right; width: 70%} .resultado{ float: right; width: 70%} </style> QNT. DISPONÍVEL:<input class="num1" type="number" value="12" disabled><br><br> Tamanho 35/36: <input class="num2" type="number"><br><br> Tamanho 37/38: <input class="num3" type="number"><br><br> Tamanho 39/40: <input class="num4" type="number"><br><br> RESTAM: <div class="resultado"></div> <button onclick="clicar()">Resultado</button> Está fazendo a subtração do total (12), e mostrando quanto que resta.
       
      Porém, o meu amigo, outro piorque eu, programador meia boca que esta trabalhando comigo, disse que precisa que esse resultado apareça dentro de um input com disabled.
       
      Vi alguns script que ensinam a exibir a div dentro de um input, porém não consegui replicar.
       
      Preciso que o conteúdo da div:
      <div class="resultado"></div>
       
      Apareça dentro de um input, exemplo:
      <input class="num4" type="text" value="   <div class="resultado"></div>    ">
       
      Alguém pode me ajudar? Estou muito preocupado, estourou o prazo e apareceu isso para fazer por fora do projeto.
       
      Abraço!!
      Obrigado!!
       
      OBS: Link onde estamos montando: http://spaflex.com.br/index.php?p=produto&amp;id=200043&amp;site=ad49f8e1bf4d27941b6051d14376304d4
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.