Jquery modal does not open

Asked

Viewed 833 times

3

I’m trying to implement a modal, but I’m not getting it open, someone could help me.

<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>

is giving the following error:

Uncaught TypeError: $(...).dialog is not a function
jquery asp.net-mvc

3 answers

3

It is not working because the jQueryUI you are using is very old, and incompatible with jQuery2.0~.

See below under "Run code snippet" your code working:

$(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>

Add the correct libraries that will work. In this case I used the CSS and JS of jQuery Ui 1.11.4, and jQuery 2.0.2.

0

Why don’t you try the bootstrap modal, it’s much simpler:

<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

To be modal the first open dialog cannot be accessed while the second is focused. Access to the first dialog should be blocked while the second is in use!

Browser other questions tagged jquery asp.net-mvc

You are not signed in. Login or sign up in order to post.