CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Filippo
Filippo

Reputation: 97

JQuery UI dialog not displaying

I'm trying to display a "dialog" with JQuery UI when i click on a button, but it isn't displaying. Is there a problem in my program?

Here is my code:

$(function() {
  $("#mode").click(function() {
    $("#dialog").dialog("open");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

Upvotes: 0

Views: 1695

Answers (3)

user3440782
user3440782

Reputation: 144

I worked in Jsfiddle and it worked fine here is the code:

$( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#mode" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
<link href="https://code.jquery.com/ui/1.12.1/themes/eggplant/jquery-ui.css" rel="stylesheet"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

Upvotes: 0

Snowmonkey
Snowmonkey

Reputation: 3761

Initialize and hide the dialog, then you're good.

$(function() {
  $("#dialog").dialog({autoOpen: false});
  
  $("#mode").click(function() {
    $("#dialog").dialog("open");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<button id="mode" type="button" class="btn-modalita link">change mode</button>

<div id="dialog" title="Empty the recycle bin?">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
    </span>you are changing mode. Are you sure?
  </p>
</div>

Upvotes: 3

user3440782
user3440782

Reputation: 144

I guess you are missing on there and also make sure you are using Correct version of jquery

$(function() {
  $("#mode").on('click', function(){
    $("#dialog").dialog("open");
  });
});

Upvotes: 0

Related Questions