Маска номера телефона работает токлько в первом модальном окне

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"/>
<script type "text/javascript" src="https://code.jquery.com/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<a href="#" class="link_top" id="myorder1">Open 1</a><br />
<a href="#" class="link_top" id="myorder2">Open 3</a><br />
<a href="#" class="link_top" id="myorder3">Open 2</a>


<div id="myorder" style="display:none;max-width:500px; padding-left:15px;">
        <h4>Track</h4>
        <div style="width:100%; float:left; padding-bottom:10px; font-size:14px;">Phone:</div>
        <form id="track" name="track" method="post" action="forms.php"> <input name="type" type="hidden" value="track">
        <div><input name="tel" type="text" value="" placeholder=" " class="form-control js-phone" style="width:170px; float:left; font-size:16px; letter-spacing:0.05em;" required> <button type="track" class="btn btn-primary" style="margin-left:10px;">traking</button></div>
        </form>
</div>

<script>
    $('.js-phone').mask("+38(999)999-99-99", {autoclear: false});
</script>


<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
<script>
    document.getElementById("myorder1").addEventListener("click", () => {
        Fancybox.show([{ src: "#myorder", type: "inline" }]);
      });  
      document.getElementById("myorder2").addEventListener("click", () => {
        Fancybox.show([{ src: "#myorder", type: "clone" }]);
      });  
      document.getElementById("myorder3").addEventListener("click", () => {
        Fancybox.show([{ src: "#myorder", type: "clone" }]);
      });
</script>
      
</body>
</html>

Answer 1

...
<script>
function applyPhoneMask() {
    $('.js-phone').mask("+38(999)999-99-99", {autoclear: false});
}
...
Fancybox.show([{ src: "#myorder", type: "inline" }]);
    applyPhoneMask();

БЛОГ НА HUSL

Маска номера телефона работает токлько в первом модальном окне

Ответы (1 шт):