How to change text size of the content inside modal body with Jquery

coders_key 0
Viewed 31

I have this code to call my modal and data is being called using Jquery. But I can't update the font size inside. I tried this CSS but it only change the color, it doesnt change the size.

CSS

.modal-body{
font-family: Arial, Helvetica, sans-serif;
color: red;
font-size: 26px;
}

Modal

<div class="modal" tabindex="-1" id="modal_feedback">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">IM Enhancement Request Form</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <?!= include('Index_Feedback') ?>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <input type="button" class="btn btn-success btn-send  pt-2 btn-block" value="Submit Request" onclick="triggerSubmit()">
            </div>
          </div>
        </div>
      </div>
modal-dialog bootstrap-modal google-apps-script html
2 Answers

instead of overwriting the css you can add style in modal-body div

style={{fontSize="26px"}}

AKASH L0 

$('#ModalBtn').on('click',function(){
  $('.modal-body').addClass('fontsize');
});
.fontsize{
font-size:30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="ModalBtn">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Mitali Patel0
Related