Jquery dialog not shown

Question

I’m having trouble presenting a window of dialog onscreen.

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style type="text/css">
    th
    {
      font-weight: normal;
      color: #3b3b3b;
      background-color: #dbdfe4;
      border: 1px solid #606060;
      padding: 1px;
      font-size: 12px;
    }
    td
    {
      padding: 1px;
      font-size: 12px;
    }
    .GradeDados table
    {
      border-collapse: collapse;
    }
    .GradeDados table td
    {
      border: 1px solid #606060;
      padding: 1px;
    }
    .ListBoxnewStyle
    {
      background-color: #AFAFAD;
      color: #3b3b3b;
    }
  </style>
  <script type="text/javascript">  

  var SqlType = '<% =vsSqlType.Value%>';
  var PassoWorkflow = parseInt(<% =vsIdPassoWorkflow.Value %>);

  function getValue() {

    var ddlDe = document.getElementById("BodyContent_livCamposForm_ddlDe_4").value;
    var ddlAte = document.getElementById("BodyContent_livCamposForm_ddlAte_4").value;

    var de = parseInt(ddlDe);
    var Ate = parseInt(ddlAte);   

    var txtReplicar = document.getElementById("BodyContent_livCamposForm_txtReplicar_4").value;
    if (!!txtReplicar.match(/^-?\d*\.?\d+$/) && txtReplicar != "") {  //Comprovo se é um valor numérico 

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

      $(function() {
          $("#dialog").dialog("open");
       });
    }
    else
    {
      document.getElementById("BodyContent_livCamposForm_NuJaneiro_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuFevereiro_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuMarco_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuAbril_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuMaio_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuJunho_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuJulho_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuAgosto_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuSetembro_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuOutubro_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuNovembro_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuDezembro_4_txtNum_4").value = txtReplicar;
      document.getElementById("BodyContent_livCamposForm_NuTotal_4_txtNum_4").value = txtReplicar * 12;
      document.getElementById("BodyContent_livCamposForm_txtReplicar_4").value = "";
    }
    } else {
//      alert("Digite um número valido");
    }
  }

  function CheckConfirm(IdPassoWorkflow) {
    if (IdPassoWorkflow == PassoWorkflow && SqlType != "Insert") {
      //return confirm("Salvar Formulário?");
    }
    if (IdPassoWorkflow == 1) {
      //return confirm("Salvar Formulário como Rascunho?");
    }
    if (IdPassoWorkflow == 2) {
      return confirm("Encaminhar para o Gestor?");
    }
    if (IdPassoWorkflow == 3) {
      return confirm("Aprovar Formulário?");
    }
    if (IdPassoWorkflow == 4) {
      return confirm("Reprovar Formulário?");
    }
    if (IdPassoWorkflow == 5) {
      return confirm("Excluir Formulário?");
    }
     if (IdPassoWorkflow == 13) {
      //return confirm("Salvar Formulário?");
    }
  }
  </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BodyContent" runat="server">
  <uc3:BreadCrumb ID="BC" runat="server" />
  <uc1:ErrorLabel ID="lblErro" runat="server" />
  <uc2:TabControl ID="TabControl" runat="server" />
  <asp:Panel ID="panFormulario" runat="server">
    <div id="dialog" title="Mensagem" runat="server" visible="false">
      <p>
        Mês De maior que Até</p>
    </div>
    <table class="Formulario">

I want to show a message to the user if they select the month Ate greater than de, according to that part:

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

          $(function() {
              $("#dialog").dialog("open");
           });
        }

I didn’t want to use the confirm because it may be disabled.

Answer 1

Put css in div#dialog as display: None; and remove the visible="false" and test to see if it works.