Jquery UI Dialog open on if condition

Question

I am creating a little game in jquery, where I want to show the user a little box, if they won the game.

The condition here is (correctcards ==10) I tried to call dialog on it but it wont work.

Can anyone tell me why?

(I also aready tried to create a new div, when correctcards turn 10 and call dialog on it then, but it doesnt work as well)

 if (correctCards == 10) { endTime = new Date().getTime(); time(); console.log('Spiel endet'); $('#myDialog2').dialog({ autoOpen: true, modal: true, resizable: false, draggable: false, buttons: { 'Next Level': function() { $(this).dialog('close'); }, 'Close': function() { $(this).dialog('close'); }, } }) } 

 <div id="myDialog2">You won</div> 

Answer 1

You need to create the dialog outside of your if .

  $('#myDialog2').dialog({ autoOpen: false, modal: true, resizable: false, draggable: false, buttons: { 'Next Level': function() { $(this).dialog('close'); }, 'Close': function() { $(this).dialog('close'); }, } }); var correctCards = 10; if (correctCards == 10) { console.log('Spiel endet'); $('#myDialog2').dialog('open'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"> <div id="myDialog2" style>You won</div>