3

Estou tentando implementar um modal, mas não estou conseguindo fazer ele abrir, alguém poderia me ajudar.

<script src="~/Scripts/jquery-2.2.0.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>

 $(document).ready(function () {

    function fnOpenNormalDialog() {
        $("#dialog-confirm").html("Confirm Dialog Box");

        // Define the Dialog and its properties.
        $("#dialog-confirm").dialog({
            resizable: false,
            modal: true,
            title: "Modal",
            height: 250,
            width: 400,
            buttons: {
                "Yes": function () {
                    $(this).dialog('close');
                    callback(true);
                },
                "No": function () {
                    $(this).dialog('close');
                    callback(false);
                }
            }
        });
    }

    $('#btnOpenDialog').click(fnOpenNormalDialog);

    function callback(value) {
        if (value) {
            alert("Confirmed");
        } else {
            alert("Rejected");
        }
    }
 });

html

<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
<div id="dialog-confirm"></div>

esta dando o seguinte erro:

Uncaught TypeError: $(...).dialog is not a function

3 Respostas 3

3

Não está funcionando porque a jQueryUI que você está usando é muito antiga, e incompatível com a jQuery2.0~.

Veja abaixo em "Executar trecho de código" o seu código funcionando:

$(document).ready(function () {

    function fnOpenNormalDialog() {
        $("#dialog-confirm").html("Confirm Dialog Box");

        // Define the Dialog and its properties.
        $("#dialog-confirm").dialog({
            resizable: false,
            modal: true,
            title: "Modal",
            height: 250,
            width: 400,
            buttons: {
                "Yes": function () {
                    $(this).dialog('close');
                    callback(true);
                },
                "No": function () {
                    $(this).dialog('close');
                    callback(false);
                }
            }
        });
    }
$('#btnOpenDialog').click(fnOpenNormalDialog);
    function callback(value) {
        if (value) {
            alert("Confirmed");
        } else {
            alert("Rejected");
        }
    }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
<div id="dialog-confirm"></div>

Acrescente as bibliotecas corretas que vai funcionar. No caso eu usei o CSS e o JS da jQuery Ui 1.11.4, e a jQuery 2.0.2.

1
  • Consegui usando css Commented 4/02/2016 às 12:55
0

Porque não tenta o modal do bootstrap, é bem mais simples:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <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">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>
0

Para ser modal o primeiro dialog aberto não pode ser acessado enquanto o segundo estiver com o foco. O acesso ao primeiro dialog deveria estar bloqueado, enquanto o segundo estivesse em uso!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .