モードレスダイアログを実装したい

上記サイトの「jQuery UIを使ったダイアログ」を実装したいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4    <head>
5        <meta charset="UTF-8">
6        <title>Document</title>
7        <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
8        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
9    </head>
10
11    <body>
12        <button id="open-sample-dialog">ダイアログを開く</button>
13        <div id="sample-dialog" title="サンプルダイアログ" style="display:none; height: 100px;">
14            <p>ダイアログです</p>
15        </div>
16    </body>
17</html>

JavaScript
1$("#open-sample-dialog").on("click", function () {
2    $("#sample-dialog").dialog();
3});

サンプル通りのはずなのですが、「ダイアログを開く」ボタンを押してもダイアログが開きません。
どこが間違っているのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

uiの前にjQuery本体を読み込ませる必要があります。
コンソールにエラー出てませんか？

下記は先に書いた内容ですが根本解決策ではないので下げました。

buttonタグのデフォルトは「submit」なのでそこが影響してるのでは？
type=button を追加してみてください

投稿2019/10/03 08:04

編集2019/10/04 19:06

m.ts10806

総合スコア80875

masa95814

2019/10/03 08:26

コンソールにエラー出てました、、、 jQuery本体を読み込ませることで解決しました！ありがとうございます。

行動規範の内容に同意します

単にjQuery本体を読んでないだけですかね

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
3<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
4<script>
5$(function(){
6  $("#open-sample-dialog").on("click", function () {
7    $("#sample-dialog").dialog();
8  });
9});
10</script>
11<button id="open-sample-dialog">ダイアログを開く</button>
12<div id="sample-dialog" title="サンプルダイアログ" style="display:none; height: 100px;">
13<p>ダイアログです</p>
14</div>