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 tabindex="-1" id="modal_feedback">
<div >
<div >
<div >
<h5 >IM Enhancement Request Form</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div >
<?!= include('Index_Feedback') ?>
</div>
<div >
<button type="button" data-bs-dismiss="modal">Close</button>
<input type="button" value="Submit Request" onclick="triggerSubmit()">
</div>
</div>
</div>
</div>
CodePudding user response:
instead of overwriting the css you can add style in modal-body div
style={{fontSize="26px"}}
CodePudding user response:
$('#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 >
<!-- Trigger the modal with a button -->
<button type="button" data-toggle="modal" data-target="#myModal" id="ModalBtn">Open Modal</button>
<!-- Modal -->
<div id="myModal" role="dialog">
<div >
<!-- Modal content-->
<div >
<div >
<button type="button" data-dismiss="modal">×</button>
<h4 >Modal Header</h4>
</div>
<div >
<p>Some text in the modal.</p>
</div>
<div >
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>