Menu
I'm trying to get a jquery dialog to launch on a button click but does not seem to be working. Any help would be appreciated:
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$(this).dialog('open');
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button id="opener">Open the dialog</button>
<div id="wrapper">
<p>Some txt goes here</p>
</div>Thanks!
799
This line
$(this).dialog('open'); // this here corresponds to the #opener div
supposed to be
$('#wrapper').dialog('open');
Also extra braces }); .. Can be ignored if this is the closing brace for DOM Ready handler
Check Fiddle
50
Ensure you are referencing the jQuery and jQueryUI libraries, as per my example below.
Try this:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$('#wrapper').dialog('open');
// return false;
});
});
</script>
</head>
<body>
<button id="opener">Open the dialog</button>
<div id="wrapper">
<p>Some txt goes here</p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
