Text overflow in jQuery modal and Bootstrap

Asked

Viewed 248 times

0

Good afternoon, I have a function in jQuery to know the number of characters in a given element and needed when more than 300 characters appear the text "see more" and opened the modal with all the information. I happen to know a little bit about jQuery and I don’t even know where to start.

 <?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>
        </head>
        <body>
            <div class="container">
              <h2>Exemplo contagem modal</h2>

              <table>
                <tr>
                    <td>
                        <?php
                            echo "<p name='alvo' id='alvo'>".$comentarios."</p>";
                        ?>
                        <div id="aqui"></div>
                    </td>
                </tr>
              </table>
              <!-- 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() {
                        // Conta caracteres.
                        var tamanho = $("#alvo").text().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>
php javascript jquery html html5

2 answers

0

Well, I’ve developed a way for your doubt to be resolved.

I did not do in a modal because I think there is no need for so much implementation. What is necessary for functioning is in the code!

I’m using a textarea to count the number of characters. However the idea of taking the size of the text inside the element is the same, always:

$('elemento').val().length;


$('textarea').on('keyup',function(){

  $('.qntLetras').text($(this).val().length);
  
  
  if($(this).val().length > 50)
  {
  
    $('.verMais').css('display','block');
  
  }
  else
  {
       $('.div').text($('textarea').val());
       if(  $('.verMais').css('display') == 'block')
       {
          $('.verMais').css('display','none');
       }
       
  }
  

});


$('.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($('textarea').val());
    modal.style.display = "block";
    

});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder='digite'></textarea>
<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>

Also decreased the number of characters only for the purpose of testing and preserving our patience.

  • Good afternoon, Thank you very much for your help. However it will have to be even with a modal or in something "floating" because the text does not fit all where it will be presented.

  • That I understood friend, just you do the modal and assign to the click of the button see more to open it. I did not put the modal here because your doubt refers to the count of 300 characters and not how to make a modal.

  • Edited with Modal......

  • I adapted the code to what I need but nothing goes to the modal.

0

At the moment it is like this. But it does not pass the value to the 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>

Browser other questions tagged php javascript jquery html html5

You are not signed in. Login or sign up in order to post.