Не могу открыть диалоги jQueryUI

1. Неверный пример скрипта

2. Рабочий пример

Я пытался узнать, как создавать диалоги, позволяющие людям вставлять ссылку на URL-адрес или ссылку на изображение и добавлять его в текстовый редактор. Но я не могу даже открыть диалоговые окна при нажатии при использовании класса .dialog. Диалог работает нормально во втором примере, когда он id #dialog. Может ли кто-нибудь показать мне, что случилось с моим первым примером?

HTML:

<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>

<a id="image">Image</a>
<div class="dialog" title="Insert picture url">
    <p><input id="imageurl" type="text"></input>
</div>
<a id="link">Url</a>
<div class="dialog" title="Insert url">
    <p><input id="url" type="text"></input>
        <input id="urltext" type="text"></input>
</div>

<select id="fonts">
 <option value="Arial">Arial</option>
 <option value="Comic Sans MS">Comic Sans MS</option>
 <option value="Courier New">Courier New</option>
 <option value="Monotype Corsiva">Monotype</option>
 <option value="Tahoma">Tahoma</option>
 <option value="Times">Times</option>
</select>
<br/>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe> 

JQuery

var input_value;

$(".dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            autoOpen: false,      
            buttons: {
                "Confirm": function() {
                    input_value;
                    $(this).dialog("close");
                },
                "cancel": function() {
                     $(this).dialog("close");
                }
            }
});

$('#image').click(function() {
  $(this).next('.dialog').dialog("open"); 
   var imageurl =  $('#imageurl').val();
    input_value = function(){
        $('#textEditor').contents().find('body').append('<img src="'+imageurl+'"/>');
    }
});

$('#link').click(function() {
  $(this).next('.dialog').dialog("open"); 
   var urllink =  $('#url').val(),
       urltext = $('#urltext').val();
    input_value = function(){
        $('#textEditor').contents().find('body').append('<a href="'+urllink+'">"'+urltext+'"</a>')
    }
});