Как открыть модальное диалоговое окно jQuery, используя <input type = "button"> вместо тега привязки?

Question

У нас ранее было:

<input type='button' value='Some Button' onClick="window.open('somefile.php')">

Теперь мы хотим активировать модальное диалоговое окно jQuery UI вместо всплывающего окна. Мы можем запустить модальное диалоговое окно, если будем использовать тег привязки следующим образом: <a href="somefile.php" class="classfordialog">Open Dialog</a>.

Но что, если это кнопка ввода?

Я использую этот скрипт для вызова диалога (и чтобы он мог открыть файл в диалоговом окне):

$(document).ready(function() {
    $('.classfordialog').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href') + ' #content')
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 500,
                height: 300
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
        });
    });
});

Src: http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

Answer 1

Вы можете использовать что угодно, чтобы активировать открытие диалога jQuery.

Например.

$(function(){
    $('.classfordialog').click(function(e){ e.preventDefault(); $('#dialog').dialog(); });
});

Вы можете добавить класс к кнопке, вводу, привязке, изображению и т. Д. *

Answer 2

Ну, вы, очевидно, не можете получить ссылку и название из "Link / A", если его там нет?

    $(document).ready(function() {
        $('.classfordialog').each(function() {
            var $dialog = $('<div></div>')
                .load('somefile.php #content')
                .dialog({
                    autoOpen: false,
                    title: 'Some title',
                    width: 500,
                    height: 300
                });

            $('.inputdialog').click(function(e){ 
                e.preventDefault(); 
                $dialog.dialog('open');
            });
        });
    });