comment faire apparaitre une div élégamment à l'aide de jquery

Je suis en train d'écrire un plugin jquery qui va ouvre une fenêtre.Ci-dessous la fenêtre de code html.

Le code html n'est pas complexe, mais ont beaucoup de balises.

Maintenant, j'ai deux choix:

1.placez ce code html sur chaque page, et cacher cette div. si il y a un événement de clic, pop-up cette fenêtre. Il est facile pour jquery.

$('.pop_width450').show()

Mais si je fais cela, il n'est pas nécessaire pour moi d'écrire un plugin de plus , ce qui est plus, si j'ouvre une fenêtre comme ceci, je dois me mettre à la fenêtre de code html dans chaque page qui ont besoin de faire apparaitre une fenêtre.

2.La deuxième façon est d'ajouter ce code dans le document. Peut-être comme ceci:

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

C'est facile, et ma question est , Si je l'utilise de cette façon.
J'ai besoin d'ajouter un peu de code html , peut-être comme ceci:

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>'
         +  ...............
         +  ...............

Alors:

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

Vous le voyez, le code html pop sera très long . Je me demande si il y a quelques de manière élégante pour résoudre ce type de problème.

Ci-dessous est mon popup code html.

Tout idées est la bienvenue. Merci.

<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>

Il n'y a pas de élégant, le code est le code et vous devez écrire tout cela, ou de la rendre universelle modal box et ensuite les mettre en forme, mais encore une fois pour ce que vous avez besoin n'est pas à court de codes.
merci @mdesdev, oui, le code est le code, pas de codes courts. Merci.
Vous êtes les bienvenus 😉

InformationsquelleAutor diligent | 2013-11-27

2

puisque vous êtes à l'aide de jQuery, vous pouvez au moins nettoyer votre html, vous n'avez pas à écrire la main comme une grande chaîne, vous pouvez également créer des éléments dans la méthode suivante:
```
var container = $( '<div/>', {
                    'class': 'pop_width450'
                });

var titleContainer = $( '<div/>', {
                         'class': 'pop_width500_title',
                         text: 'Send An Invitation'
                     }).appendTo( container );
```
Cela permettra au moins de garder votre code JS que le HTML de la chaîne, et vous pouvez automatiser la tâche par la construction d'une fonction qui prend un objet de données et de miser une somme d'HTML pour vous, alors vous pouvez réutiliser le code sur d'autres projets d'aller de l'avant

InformationsquelleAutor kkemple
0

Avez-vous envisagé d'utiliser quelque chose comme colorbox et avoir votre fenêtre pop-up s'agir d'une page dans son propre droit de vous servir dans colorbox directement.

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

Ensuite, vous avez juste besoin commun du code JS que vous pourriez inclure dans un .js fichier pour chaque page de votre crochet et cliquez sur afficher la colorbox.
- Merci de Paddy, ce beau plugin, je vais essayer . Merci.
- Pas de probs. Il y a un certain nombre d'autres qui font des choses similaires - c'est juste celui que je connais le mieux...
InformationsquelleAutor Paddy
0

Écrire votre pop-up de code dans un fichier commun à l'aide de votre deuxième façon:
```
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....
    }
```
Ensuite dans n'importe quelle page et sur le contrôle où vous voulez montrer votre pop-up: (1) d'abord importer votre fichier JS et (2) lier cette méthode pour le contrôle cliquez sur l'événement:
```
<input type="button" onclick="ShowPopUp()"/>
```
- merci, je connais votre sens. Je viens juste de ne pas écrire deux longues code html en js, comme la variable la pop. ses trop long. Je suppose que, il y a un moyen de rendre cela plus facile 🙂
- ohh ok, mais vous devez écrire que le code html soit dans le fichier html ou un fichier JS. Si son dans le HTML alors sa va répéter à chaque page. Autre solution pourrait être de les ranger que du code html dans un fichier de dire temp.txt et en l'appelant par AJAX chaque fois que nécessaire.
- vous avez raison, peut-être que mon gourmand
InformationsquelleAutor Savaratkar

Vous devez vous connecter pour publier un commentaire.