Jump to content
Inferi

[Resolvido] Texto "flutuante"

Recommended Posts

Inferi

Bom dia,

Tenho uma tabela dinâmica em HTML que é preenchida com dados vindos da BD.

Há um campo da tabela que em certas ocasiões pode ter mais de 300 caracteres, sei que pode defeito existe uma ferramenta nos CSS's que me permitem adicionar reticências quando o texto tem mais de X de caracteres. Queria saber se existe alguma ferramenta sem recorrer ao JavaScript que clicando nas reticências me mostre o texto completo numa "mini janela" flutuante. 

Se apenas existir em JavaScript poderiam-em dizer onde posso consultar esses exemplos de forma a aplicá-lo no meu projecto?

 

Cumprimentos,

Diogo Jesus

Share this post


Link to post
Share on other sites
Uemerson Santana

Boa noite amigo,

Procedimento via JavaScript-jQuery.

 

<!DOCTYPE html>
<html lang="en">
	<head>
	  <title>Exemplo contagem modal</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
		  <h2>Exemplo contagem modal</h2>

		  <input type="text" name="alvo" id="alvo">
		  <div id="aqui"></div>

		  <!-- Modal -->
		  <div class="modal fade" id="alvoModal" role="dialog">
		    <div class="modal-dialog">
		    
		      <!-- Modal content-->
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal">×</button>
		          <h4 class="modal-title">Modal</h4>
		        </div>
		        <div class="modal-body">
		          <textarea name="alvoTextArea" rows="10" cols="30"></textarea>
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
		        </div>
		      </div>
		      
		    </div>
		  </div>
		  
		</div>
		<script type="text/javascript">
			$(function() {
				$("#alvo").keyup(function() {
                  	// Conta caracteres.
					var tamanho = $("#alvo").val().length;
                  	// Exibe um modal com textarea, caso o número de caracteres seja maior que 300.
			      	if (	tamanho > 300	) { 
			        	$("#alvoModal").modal();
			        }
                  	//	Mostra número de caracteres.
			        $("#aqui").html(tamanho);
				});
			});
		</script>
	</body>
</html>

 

Espero ter ajudado.

Share this post


Link to post
Share on other sites
HappyHippyHippo
6 hours ago, Uemerson Santana said:

Boa noite amigo,

Procedimento via JavaScript-jQuery.

 


<!DOCTYPE html>
<html lang="en">
	<head>
	  <title>Exemplo contagem modal</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
		  <h2>Exemplo contagem modal</h2>

		  <input type="text" name="alvo" id="alvo">
		  <div id="aqui"></div>

		  <!-- Modal -->
		  <div class="modal fade" id="alvoModal" role="dialog">
		    <div class="modal-dialog">
		    
		      <!-- Modal content-->
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal">×</button>
		          <h4 class="modal-title">Modal</h4>
		        </div>
		        <div class="modal-body">
		          <textarea name="alvoTextArea" rows="10" cols="30"></textarea>
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
		        </div>
		      </div>
		      
		    </div>
		  </div>
		  
		</div>
		<script type="text/javascript">
			$(function() {
				$("#alvo").keyup(function() {
                  	// Conta caracteres.
					var tamanho = $("#alvo").val().length;
                  	// Exibe um modal com textarea, caso o número de caracteres seja maior que 300.
			      	if (	tamanho > 300	) { 
			        	$("#alvoModal").modal();
			        }
                  	//	Mostra número de caracteres.
			        $("#aqui").html(tamanho);
				});
			});
		</script>
	</body>
</html>

 

Espero ter ajudado.

e bootstrap ... não te esquecas disso ...


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
HappyHippyHippo
1 hour ago, Inferi said:

bootstrap como assim?

foi referenciado que foi puxado o jquey para resolver o problema, no entanto nao diz que o bootstrap também foi

  • Vote 1

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Uemerson Santana
1 hour ago, Inferi said:

bootstrap como assim?

Bootstrap é o mais popular framework HTML, CSS, e JS para desenvolvimento de projetos responsivo e focado para dispositivos móveis na web.

  • Vote 1

Share this post


Link to post
Share on other sites
Inferi

Boa tarde,

Só agora tive tempo e disponibilidade para explorar isto.

Neste momento o código está assim, mas não me passa valor nenhum para o modal.

<?php
    include('../includes/ligacao.php');
    $sql = "SELECT * FROM objetos WHERE numero='AFS1848'";
    //executa a query
    $result = mysqli_query($conn,$sql);
    $array=mysqli_fetch_assoc($result);
    $comentarios = $array['comentarios_dados'];
    //print $comentarios;
?>


<html lang="en">
	<head>
	  <title>Exemplo contagem modal</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
        span{

        font-size: 0.8em;
        color: #b3b3b3;

        }


        .div{

        width: 30%;
        border: 2px double coral;
        padding: 5px;

        }

        .verMais{
        
        display:none;
        padding: 5px;
        color: coral;

        }


        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
            from {top:-300px; opacity:0} 
            to {top:0; opacity:1}
        }

        @keyframes animatetop {
            from {top:-300px; opacity:0}
            to {top:0; opacity:1}
        }

        /* The Close Button */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {padding: 2px 16px;}

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }
      </style>
	</head>
	<body>
    <?php
        echo "<p name='alvo' id='alvo'>".$comentarios."</p>";
    ?>
    <br>
    <span class='qntLetras'></span>
    
    
    <div class='div'></div>
    <span class='verMais'>Ver Mais</span>
    
    <div id="myModal" class="modal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
          <p>Some text in the Modal Body</p>
        </div>
        <div class="modal-footer">
          <h3>Modal Footer</h3>
        </div>
      </div>
    
    </div>
        <script type="text/javascript">
            $(function() {
                // Conta caracteres.
                var tamanho = $("#alvo").text().length;
                // Exibe um modal com textarea, caso o número de caracteres seja maior que 50.
                if (    tamanho > 50   ) { 
                    $('.verMais').css('display','block');
                }
                else{
                    $('.div').text($('#alvo').val());
                    if(  $('.verMais').css('display') == 'block'){
                        $('.verMais').css('display','none');
                    }
                }
                //  Mostra número de caracteres.
                $("#aqui").html(tamanho);
            });
                
            $('.verMais').on('click',function(){
                var modal = document.getElementById('myModal');
                var btn = document.getElementById("myBtn");
                var span = document.getElementsByClassName("close")[0];
                
                span.onclick = function(){
                    modal.style.display = "none";
                }
                
                window.onclick = function(event){
                    if (event.target == modal) {
                        modal.style.display = "none";
                    }
                }
                
                $('.modal-body p').text($('#alvo').val());
                modal.style.display = "block";
            });
		</script>
	</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.