#jquery #twitter-bootstrap
#jquery #twitter-bootstrap
Вопрос:
У меня есть кнопка для переключения модального и отправки некоторых скрытых значений в модальный on('show.bs.modal', function(e)
. Однако модальный не запускается после нажатия кнопки.
Ответ №1:
Рабочий пример
$(document).ready(function(){
$('#show').click(function(){
$('#loginForm').modal('show');
});
$('#loginForm').on('show.bs.modal', function () {
var val = $('#show').data('id');
alert(val);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<button class="btn btn-primary btn-sm" id='show' data-id="1">Show Modal</button>
<div class="modal fade" id="loginForm" style="box-shadow: 5px 5px 5px grey;" tabindex="-1" role="dialog" aria-labelledby="print_size" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-header modal-center-heading">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">amp;times;</span>
</button>
</div>
<div class="modal-body">
<div class="empty">
<input type="email" placeholder="Email" class="input-style" name="">
<input type="password" placeholder="* * * * * * *" name="" class="input-style">
</div>
</div>
<div class="modal-footer" style="border-width: 0px;">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="a4Size">Login</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="a4Size">Cancel</button>
</div>
</div>
</div>
</div>