I have a problem deploying a modal bootstrap .
My website is composed of several sections and to move between them there is a scroll with anchors and a contact form.
When I go directly to the form and press the send button, the already configured modal is not displayed, but when I go to the section where the form is by means of my anchors (configured with a scroll in jquery) if I am roll the modal correctly.
I assume that what happens is that when using the wide system the librery is already loaded on my page and then boostrap can already use them and it's deployed. On the other hand, when I go directly, the library is not loaded well.
'
<head>
<title>Ing. Adrian Rojas Terraza</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link rel="stylesheet" type="" href="css/master.css">
<link rel="stylesheet" href="css/bootstrap-flex.css">
<link rel="stylesheet" type="" href="css/profile.css">
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="img/icon.png" />
<link rel="alternate" type="text/html" href="modal.html">
<script src="lib/js/smooth-scroll.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/js.js"></script>
</head>
<body>
ARTZ
<a href="#who"><img src="lib/icons/PNG/user-tie.png"> Perfil profesional</a>
<a href="#services"><img src="lib/icons/PNG/terminal.png"> Conocimientos</a>
<a href="#herramientas"> <img src="lib/icons/PNG/hammer.png"> Herramientas</a>
<a href="#curriculum"><img src="lib/icons/PNG/profile.png"> Curriculum</a>
<a href="#local"><img src="lib/icons/PNG/location2.png"> ¡Contactame!</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
<div>
<img src="img/profile.jpg" alt="Avatar" class="image" >
</div>
</div>
<div class="ing">ING. Adrian Rojas Terraza </div>
<div class="wrap">
<div class="widget">
<div class="fecha">
<p id="diaSemana" class="diaSemana">,</p>
<p id="dia" class="dia"></p>
<p> de </p>
<p id="mes" class="mes"></p>
<p> del </p>
<p id="year" class="year"></p>
</div>
<div class="reloj">
<p id="horas" class="hora"> </p>
<p>:</p>
<p id="minutos" class="minutos"></p>
<p>:</p>
<div class="cajaSegundos">
<p id="ampm" class="ampm"></p>
<p id="segundos" class="segundos"></p>
</div>
</div>
</div>
</div>
</header>
<!-- Quien Soy-->
<Section id='who' class="content who">
<h2 class="title">Perfil profesional. <span><img src="img/iconospage/PNG/user.png"></span></h2>
<h3><p>Profesional orientado al logro, con conocimientos adquiridos en el ámbito laboral, dispuesto a formar parte de un equipo de trabajo, colaborando así con la empresa en el logro de sus objetivos, con altos estándares de responsabilidad y compromiso dentro de la organización</p>
</h3>
<br>
<br>
<div >
<span>
<img class="logBig" src="img/iconospage/SVG/board.svg">
</span>
</div>
</Section>
<!--Servicios-->
<section id="services" class="content services">
<h2 class="title">Conocimientos. <span><img src="img/iconospage/PNG/lamp.png"></span></h2>
<p>Lenguajes de programacion y estandar de programacion web.</p>
<br>
<div href="www.google.com" class= 'listas'><a href="http://google.com" ><img data-toggle="tooltip" title="Html5!" class= 'listaImg' src="img/html5.png"></a> </div>
<div href="#" class= 'listas'><a href="http://www.javascript.com/"><img data-toggle="tooltip" title="Javascript!" class= 'listaImg' src="img/Javascript.png"></div></a>
<div href="#" class= 'listas'><a href="http://php.net/"><img data-toggle="tooltip" title="php!" class= 'listaImg' src="img/php.png"></div>
<div href="#" class= 'listas'><a href=""><img data-toggle="tooltip" title="css!" class= 'listaImg' src="img/css.svg"></div>
<div href="#" class= 'listas'><a href="http://www.oracle.com/technetwork/es/articles/sql/index.html"><img data-toggle="tooltip" title="plsql!" class= 'listaImg' src="img/plsql.png"></a></div>
<div href="#" class= 'listas'><a href="http://jquery.com"><img data-toggle="tooltip" title="Jquery!" class= 'listaImg' src="img/jquery.gif"></a></div>
</section>
<!-- TARIFAS-->
<section id="herramientas" class="content services" style=' background: #161123'>
<h2 class="title"> Herramientas de Gestion. <span><img src="img/iconospage/PNG/settings.png"></span></h2>
<p>
Herramientas y programas, en el manejo de la gestion diaria de actividades.
</p>
<br>
<div class= 'listas'><a href="http://es.atlassian.com/software/jira"><img data-toggle="tooltip" title="Jira!" class= 'listaImg' src="img/jira.png"> </div></a>
<div class= 'listas'><a href="http://bmc.com/it-solutions/remedy-itsm.html"><img data-toggle="tooltip" title="Remedy!" class= 'listaImg' src="img/remedy.png"></div></a>
<div class= 'listas'><a href="http://www.quest.com/mx-es/toad/"><img data-toggle="tooltip" title="Toad!" class= 'listaImg' src="img/toad.png"></div></a>
<div class= 'listas'><a href="http://trello.com"><img data-toggle="tooltip" title="Trello!" class= 'listaImg' src="img/trello.png"></div></a>
<div class= 'listas'><a href="http://zapier.com"><img data-toggle="tooltip" title="Zapier!" class= 'listaImg' src="img/zapier.png"></div></a>
<div class= 'listas'><a href="http://zapier.com"><img data-toggle="tooltip" title="Git!" class= 'listaImg' src="img/git.png"></div></a>
<div class= 'listas'><a href="http://zapier.com"><img data-toggle="tooltip" title="Slack!" class= 'listaImg' src="img/Slack.png"></div></a>
<div class= 'listas'><a href="http://zapier.com"><img data-toggle="tooltip" title="Zapier!" class= 'listaImg' src="img/gsuite.png"></div></a>
<div class= 'listas'><a href="http://zapier.com"><img data-toggle="tooltip" title="Sublime!" class= 'listaImg' src="img/sublime.png"></div></a>
<div class= 'listas'><a href="http://zapier.com"><img data-toggle="tooltip" title="Office!" class= 'listaImg' src="img/office.svg"></div></a>
<div class= 'listas'><a href="http://zapier.com"><img data-toggle="tooltip" title="Office!" class= 'listaImg' src="img/windows.png"></div></a>
</section>
<!--CURRICULUM-->
<section id="curriculum" class="content tarifas">
<article class="contain">
<h2 class="title" >Curriculum <span><img src="img/iconospage/PNG/board.png"></span></h2>
<p>En rasgos generales</p>
<p>
<li>Analista Senior QA, Consis international</li>
<li>Analista de Sistemas, CANTV</li>
<li>Analista desarrollador, Cooperativa ITESI.COM</li>
</p>
<p>Para acceder a la informacion completa de mi hoja de vida Click a el Boton <b>Descargar</b></p>
<a href="#" class="btn">Descargar</a>
</article>
</section>
<!--LOCALIZACION-->
<section id="local" class="content local">
<h2 class="title">Contactame! <span><img src="img/iconospageblack/PNG/envelope.png"></span></h2>
<p><h4>Para hacer efectiva nuestra comunicacion, ingresa tus datos en el formulario y pongamonos en contacto!!</h4></p>
<br>
<div class="formMaster">
<form class="form-horizontal">
<div class="form-group">
<label for="exampleInputEmail1">Tipo de persona (Natural ó Juridica)</label>
<select class="form-control">
<option>Natural.</option>
<option>Juridica.</option>
</select>
<br>
<label for="exampleInputEmail1">Nombre</label>
<input type="text" class="form-control" placeholder="Nombre.">
<br>
<label for="exampleInputEmail1">Numero de Contacto.</label>
<input type="text" class="form-control" placeholder="Text input">
<br>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<br>
<label for="exampleInputPassword1">Descripción</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal">Enviar</button>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">¡Gracias por contactarme! <?php echo 'HOOOOOLA';?></h4>
</div>
<div class="modal-body">
<p><b>El Mensaje </b> fue enviado con <b>exito</b>, pronto me pondre en contacto con usted.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
<div>
<figure class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3923.2075114183667!2d-66.83153459579866!3d10.484301494803542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc52d4083f54e7f4f!2sConsis+Internacional!5e0!3m2!1ses!2sve!4v1521669013885" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</figure>
</div>
</section>
<section class="footer">
<div class="version">Sha-6514756sdf5g47sd5</div>
<div class="Autor">© 2018 - Pagina diseñada y creada por<b> Ing. Adrian Rojas Terraza. </b></div>
<div class="redes">
<img clas='imgHome' src='img/icomoonredes/SVG/instagram.svg' >
<img clas='imgHome' src='img/icomoonredes/SVG/facebook.svg' >
<img clas='imgHome' src='img/icomoonredes/SVG/linkedin.svg' >
</img></div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="lib/js/bootstrap.min.js"></script>
<div class="loader-page"> </div>
<script type="text/javascript" src="js/reloj.js" > </script>
</body>
</html>'