Непонятно, как использовать диалог jQuery UI modal popup

Я хочу использовать плагин jQuery UI http://learn.jquery.com/jquery-ui/getting-started/, поэтому у меня есть все, что мне нужно скачать. Я поставил файлы там, где они должны быть, и включил их в <head>, как я предполагал, - никаких проблем нет. Но потом я немного застрял из-за моей полной нообиенности.Непонятно, как использовать диалог jQuery UI modal popup

Он говорит:

После того, как вы включили необходимые файлы, вы можете добавить несколько виджетов JQuery на свою страницу. Например, чтобы создать виджет datepicker, вы добавите элемент ввода текста на свою страницу, а затем вызовите .datepicker(); в теме. Как это: HTML:<input type="text" name="date" id="date" />

JS:

$('#date').datepicker();

Я хочу использовать диалоговое окно модальное всплывающее окно с формой в нем они получили в качестве демо. http://jqueryui.com/demos/dialog/#modal-form. Форма появится, когда кто-то щелкнет изображение.

Насколько я могу разобраться (я начинаю с JavaScript) Мне нужно сделать скрытый div на моей странице, который содержит форму. Мне нужно как-то прикрепить его к JavaScript, тогда нужно вызвать его, когда пользователь нажимает на изображение.

Я понятия не имею, правильно это или нет. И если это правильно, я не знаю, как это сделать. Любой фантазии ускоряя меня вместе с некоторыми направлениями :)

источник

2011-09-08 sammy sausage

Я думаю, что вы хотите что-то вроде этого: http://jsfiddle.net/expertCode/gTPnz/

HTML:

<div> 
    <img alt="exampleImage" src="http://www.cancercareofwnc.com/Images/topmenu_testing_0.gif"> 

    <div id="myDiv"> 
     <form id="myForm"> 
      <input type="text" name="date" id="date" /> 
      <input type="text" name="other" id="other" /> 
     </form> 
    </div> 
</div>

CSS:

div#myDiv{ 
    visibility:hidden; 
}

JavaScript:

$(document).ready(function(){ 
    $('img[alt="exampleImage"]').click(function(){ 
     $('#myForm').dialog(); 
    });       
});

источник

2011-09-08 22:51:37 expertCode

Это не объясняет, как использовать этот конкретный плагин tho. Или, по крайней мере, если я этого не понимаю. Javascript для плагина waaaay больше, чем то, что у вас есть. Не может быть точно так же? –

Чтобы работать, вам необходимо включить в свой проект последнюю версию jQuery и пользовательский интерфейс jQuery. После этого вы можете использовать эти Виджеты, например, как диалог(). Чтобы узнать, как работают эти библиотеки, у вас есть хорошая документация, объясняющая все вещи: - [Документация jQuery] (http://docs.jquery.com/Main_Page) - [Документация пользовательского интерфейса jQuery] (http: //docs.jquery .com/UI) Это было то, что вы хотели знать? – expertCode

Итак, ваш скрытый DIV может иметь класс .noshow

Вы можете добавить в свой CSS:

`.noshow` { 
    display: none !important; 
}

Тогда в ваших JS,

$('#mylink').click(function() { 
    $('#hiddenForm').removeClass('noshow').dialog({ modal: true }); 
});

должен работать ...

источник

2011-09-08 22:52:09

Привет, спасибо за ответ, но хотя это и делает sorta, что я хочу, не объясняет конкретно, как использовать плагин. –

Непонятно, как использовать диалог jQuery UI modal popup

ответ

Смежные вопросы