jquery dialog will not close after clicking a URL -

i have put jquery dialog on webpage let visitors choose language. worked fine little while, still works, except box not close when 1 of urls clicked. in tags have following code:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>     <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>     <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">     <script>     $(document).ready(function(){     $( "#hello" ).dialog( {width:350},{ autoopen: true });     });     </script> 

in tag following code appears:

<div id="hello" title="welkom - welcome!"><p align="center"><font face="georgia" size="4"> kies uw taal - choose language</font></p> <div align="center"><a href="index.html">nederlands</a> <a href="indexeng.html">english</a></div></div> 

the popup appears, both links work, but, said, problem is, box not disappear when url clicked. copied code udemy , made adjustments it, but, being novice am, must have overlooked something.

if me sort out, grateful.

the widget has close method. on click of buttons can invoke close model.

for example assume have class lang on div like:

$(function() {    $("#hello").dialog({      width: 350,      autoopen: true    });    $('.lang a').on('click', function(event) {      event.preventdefault();      $("#hello").dialog('close');    });  });

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <div id="hello">    <div class="lang" align="center">      <a href="index.html">nederlands</a>       <a href="indexeng.html">english</a>    </div>  </div>