Modal Jquery does not open

Question

Modal Jquery does not open

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I'm trying to implement a modal, but I can not get it to open, could anyone 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><scripttype="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>$(document).ready(function(){functionfnOpenNormalDialog(){$("#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

asked by anonymous 03.02.2016 / 18:17

3 answers

How to use the same Bootstrap header for two different menus Open and close a Collapse at a time

score 3 · Answer 1

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><scriptsrc="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 case I used jQuery UI CSS and JS 1.11.4, and jQuery 2.0.2.

score 0 · Answer 2

Because it does not try the bootstrap modal, it's a lot 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><scriptsrc="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>

score 0 · Answer 3

0

To be modal the first open dialog can not be accessed while the second is in focus. Access to the first dialog should be blocked while the second one is in use!

12.02.2016 / 15:32