как открыть div элегантно используя jquery

0

Я пишу плагин jquery, который будет всплывать в окне.Below - это код окна html.

Код html не является сложным, но имеет много тегов.

Теперь у меня есть два варианта:

1.Put этот HTML - код на каждой странице, и скрыть DIV. если есть событие click, всплывающее окно. Это легко для jquery.

$('.pop_width450').show()

Но если я это сделаю, мне больше не нужно писать плагин, что еще, если я всплываю в таком окне, я должен поместить код окна html на каждую страницу, которая должна всплывать в окне.

2. Второй способ - добавить этот код в документ. Может быть, вот так:

$('<div class="pop_width450">').appendTo(document.body);

Это легко, и мой вопрос: если я использую этот путь. Мне нужно добавить много html-кода, может быть, вот так:

var pop = '<div class="pop_width450">'
         +    '<div class="pop_width500_title">Send a Invitation'
         +      '<span><a href><img src="imgs/icon/icon_delete_12px.png" border-bottom="0" /></a></span>'
         +  ...............
         +  ...............

Затем:

$(pop).append(document.body);

Вы видите, что HTML - код поп будет очень долго. Интересно, есть ли какой-то изящный способ решить эту проблему.

Ниже приведен код popt html.

Любые идеи приветствуются. Благодарю.

<div class="pop_width450">
    <div class="pop_width500_title">Send a Invitation
        <span>
            <a href="#">
                <img src="imgs/icon/icon_delete_12px.png" border-bottom="0" />
            </a>
        </span>
    </div>
    <div class="pop_width500_content">
        <ul>
            <li class="li480">
                <div class="div100">Name</div>
                <div class="div380">
                    <input name="" class="input300" type="text" />&nbsp;
                </div>
            </li>
            <li class="li480">
                <div class="div100">Subject</div>
                <div class="div380">
                    <input name="" class="input300" type="text" />&nbsp;
                </div>
            </li>
            <li class="li480">
                <div class="div380b">
                    <textarea name="" class="textarea300" cols="" rows=""></textarea></div>
            </li>
            <li class="li480">&nbsp;</li>
            <li class="li480">
                <div class="div380b">
                    <input type="button" class="btn_gray_22" value="Send" />
                </div>
            </li>
            <li class="li480">&nbsp;</li>
        </ul>
    </div>
</div>
  • 0
    Не существует элегантного способа , код - это код, и вы должны написать все это, или сделать универсальное модальное поле, а затем поместить в него форму, но опять же для того, что вам нужно, нет коротких кодов.
  • 0
    спасибо @mdesdev, да, код есть код, нет коротких кодов. Благодарю.
Показать ещё 1 комментарий
Теги:
popup

3 ответа

2
Лучший ответ

поскольку вы используете jQuery, вы можете по крайней мере очистить свой html, вам не нужно записывать его в виде большой строки, вы также можете создавать элементы следующим способом:

var container = $( '<div/>', {
                    'class': 'pop_width450'
                });

var titleContainer = $( '<div/>', {
                         'class': 'pop_width500_title',
                         text: 'Send An Invitation'
                     }).appendTo( container );

Это, по крайней мере, позволит вашему коду больше JS, чем HTML-строку, и вы можете автоматизировать задачу, построив функцию, которая берет объект данных и будет выстраивать для вас любое количество HTML, тогда вы можете повторно использовать код для перемещения других проектов вперед

Поделиться
0

Вы считали, что используете что-то вроде colorbox, а ваше всплывающее окно - это страница по своему усмотрению, которую вы используете в colorbox напрямую.

http://www.jacklmoore.com/colorbox/

Тогда вам просто нужен обычный JS-код, который вы могли бы включить в файл.js для каждой страницы, чтобы зацепить ваш клик и показать colorbox.

Поделиться
  • 0
    Спасибо Пэдди, какой хороший плагин, я попробую. Благодарю.
  • 0
    Нет проблем. Есть ряд других, которые делают подобные вещи - это тот, который я знаю лучше всего ...
0

Напишите свой всплывающий код в общем файле, используя второй способ:

function ShowPopUp()
{
    var pop = '<div class="pop_width450">'
             +    '<div class="pop_width500_title">Send a Invitation'
             +      '<span><a href><img src="imgs/icon/icon_delete_12px.png" border-bottom="0" /></a></span>'
             +  ...............
             +  ...............
   $(this).html(pop);
//     OR 
    $(this).append(pop); // Test it yourself, which one is preferable for pop up....
    }

Затем на какой странице и в элементе управления вы хотите показать свое всплывающее окно: (1) сначала импортируйте свой JS файл и (2) привяжите этот метод к событию с щелчком элемента управления:

<input type="button" onclick="ShowPopUp()"/>
Поделиться
  • 0
    спасибо, я знаю твой смысл Я просто не пишу два длинных HTML-кода в js, как переменная pop. это слишком долго. Я думаю, есть какой-то способ сделать это проще :)
  • 0
    ооо хорошо, но вы должны написать этот HTML-код либо в HTML-файл или JS-файл. Если это в HTML, то это будет повторяться на каждой странице. Другим обходным решением может быть помещение этого HTML-кода в файл с именем temp.txt и вызов его через AJAX при необходимости.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню