JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 form-group">
<button type="button" id="btn-modal-maskmoney" class="btn btn-primary btn-lg">
Click Me
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label>Mask</label>
<input type="text" id="mask" class="form-control money" >
</div>
</div>
</div>
<!-- The modal -->
<div class="modal fade" id="modal-maskmoney" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Mask-Money</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" id="UpUltimoSalario" name="UpUltimoSalario" value="" class="form-control money" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$(function() {
console.log('init app');
$('#UpUltimoSalario').val('3.555,00');
$('#mask').val('3.555,00');
$('#btn-modal-maskmoney').click(function () {
showModel();
});
initMaskMoney();
setMask();
});
function initMaskMoney() {
$("#UpUltimoSalario").maskMoney({showSymbol:true, symbol:"R$", decimal:",", thousands:".", affixesStay: false});
}
function setMask() {
$('.money').mask('#.##0,00', {reverse: true, maxlength: false});
}
function showModel() {
let modal = $('#modal-maskmoney');
modal.on('shown.bs.modal', function () {
$(this).find('input:visible:first').focus();
});
modal.modal('show');
}