При вызове модального окна не ставится курсор в поле ввода, помогите решить. Код страницы:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page pageEncoding="UTF-8" %>
<html>
<head>
<script src="<c:url value="/js/jquery.js"/> "></script>
<style type="text/css">
#modalForm {
background: yellow;
position: fixed;
display: none;
z-index: 5;
}
#modalForm #modalClose {
cursor: pointer;
}
#overlay {
z-index: 3;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#show').click(function (event) {
event.preventDefault();
$("#myInp1").focus();// ставим фокус на поле
$('#overlay').fadeIn(400,
function () {
$('#modalForm')
.css('display', 'block')
.animate({opacity: 1, top: '50%'}, 200);
});
});
$('#modalClose, #overlay').click(function () {
$('#modalForm').animate({opacity: 0, top: '45%'}, 200,
function () {
$(this).css('display', 'none');
$('#overlay').fadeOut(400);
}
);
$("#myInp1").val("");// очищаем инпут
$("#myImg").val("");// очищаем инпут
});
});
</script>
</head>
<body>
<button id="show" >окно</button>
<!-- Модальное окно -->
<div id="modalForm">
<span id="modalClose">X</span>
<br>
<input id="myInp1" type="text" placeholder="имя" autofocus>
<br>
img: <input id="myImg" type="file">
</div>
<div id="overlay"></div>
</body>
</html>
on
является новее. Например, click не будет работать с теми элементами DOM, которые подгрузились или создались впоследствии, а delegate и on будут