Puis-je fixer la largeur et la hauteur de jQueryMobile dialogue?

Puis-je fixer la largeur et la hauteur de jQueryMobile dialogue? Actuellement, la taille de la largeur est de 100%, ce qui est vraiment terrible dans l'iPad.

OriginalL'auteur PPShein | 2011-05-09

  1. 2

    Vous pouvez définir la largeur de page de la boîte de dialogue en Direct exemple: http://jsfiddle.net/bXPTd/3/

    <div data-role="page" id="bar">
   <a href="#foo" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>  

</div>

<div data-role="page" id="foo" style="width:300px;">
    Hello Foo
    <a href="#" data-role="button" data-rel="back">Close dialog</a>
</div>
    c'est 50% de réponses correctes. Parce que si je le fais, la superposition ne peut pas prendre 100% de l'espace de l'écran. Elle ne peut prendre de 300px de l'écran que vous avez défini. Est ce que je veux je veux résoudre uniquement de la boîte de dialogue largeur non inclus superposition.

    OriginalL'auteur Phill Pafford

  2. 2

    J'ai eu un problème similaire, j'avais besoin de contrôle de la taille d'une boîte de dialogue et les non-modal - de sorte que le fond de page est visible derrière. Phil méthode fonctionne très bien, cependant, vous devez rendre l'arrière-plan du conteneur transparent ET aussi faire l'appel de la page de rester dans les DOM et encore visible (comme de la beta 2, le DOM est automatiquement taillés de sorte que la page qui appelle la boîte de dialogue est retiré de la DOM lorsque vous affichez la boîte de dialogue)

    La première étape a été de rendre le contenant de superposition transparente, quel que soit le thème de votre aide, par exemple,

    .ui-body-a,
.ui-body-a input,
.ui-body-a select,
.ui-body-a textarea,
.ui-body-a button {
    background-color: transparent;
    font-family: Helvetica, Arial, sans-serif;
}

    Alors de garder l'appel de la page qui est visible, assurez-vous que le cache dans les DOM par l'ajout de la data-dom-cache="true" à l'appel de la page, et je vous ai trouvé également eu pour remplacer l'écran et z-index styles (et bien sûr de la largeur) pour s'assurer qu'il reste visible et derrière la boîte de dialogue, par exemple

    <div id='homePage' data-role="page" data-theme='a' data-dom-cache="true" style='display:block !important;z-index: 0;width:300px'>

    <div data-role="header" data-theme='a'><h1>Header</h1></div><!-- /header -->

    <div data-role="content" data-theme='a' style='margin:0; padding: 0'>   
        <a href="#testdialog" data-role="button"  data-rel="dialog" data-transition="pop">Open Dialog</a>
    </div><!-- /content -->

</div><!-- /page -->

    Vous pouvez également le cache de chaque page dans les DOM, plutôt que d'ajouter data-dom-cache="true" à chaque page, en appelant;

    $.mobile.page.prototype.options.domCache = true;

    Mais qui semble assez lourd.

    Edit:

    Trouvé un autre moyen possible d'ajuster la largeur et la hauteur, vous pouvez simplement modifier les marges de la boîte de dialogue; 

    .ui-dialog .ui-header, 
.ui-dialog .ui-content, 
.ui-dialog .ui-footer {
    margin-left: 100px;
    margin-right: 100px;
}

    Vous aurez toujours besoin de faire les trucs que j'ai mentionné au sujet de garder la page précédente visible derrière!

    Oublié d'ajouter, au centre de la boîte de dialogue, j'ai dû définir la marge de gauche, je suis sûr qu'il y est une meilleure façon de le faire - mais cela a fonctionné pour moi 😉

    OriginalL'auteur Mike P

  3. 1

    Je n'ai, en outre, à la suggestion de Mike, le fond de page est visible uniquement couverts par la boîte de dialogue, et non pas de la boîte de dialogue arrière-plan.

    .ui-dialog { 
    min-height: 480px;
    background-color: transparent;
    background-image: none;
}

    OriginalL'auteur chiacy

  4. 1

    Pensé le partager mise à Jour de RC2- max-width est maintenant par défaut, 500px, avec une option pour modifier la valeur par défaut. Cela répond à la question que vous aviez avec de grands écrans.http://jquerymobile.com/blog/2011/10/19/jquery-mobile-1-0rc2-released/#features

    Également, concept similaire comme Mike, et je suis encore à peaufiner celui - ci- Mais pour créer une superposition de dialogue avec un arrière-plan visible, vous devez 1. supprimer la couleur d'arrière-plan & image de la .ui-dialogue 2. Assurez-vous que l'appel de l'affichage de la page est le bloc 2. Définir l'opacité de la page appelant à 50%. Cela aussi (au moins dans Chrome 14) résolu tous les z-index questions j'ai eu automatiquement!

    .ui-dialog{ background: none;}
.inactive{ opacity: .50; display: block;}

    Où inactif est une classe que j'ai ajouté à la div où le dialogue a été appelé à partir. Vous aurez besoin pour vous assurer que les inactifs classe est au détriment de la valeur par défaut display: none; si, et éventuellement utiliser un peu de javascript pour ajouter inline style.

    Super! Cela fonctionne bien mais j'ai trouvé un problème. Elle est liée à des dialogues imbriqués pour laquelle votre correction n'est pas de travail. Regarde Ici.
    Que de nouvelles versions de jQueryMobile (je pense que cette version 1.0) vous pouvez maintenant ajouter une superposition-thème de la boîte de dialogue de la page. Cela vous permet d'utiliser un faux thème, comme des données de superposition-theme="q" et puis dans votre CSS mis quelque chose comme ceci: .ui-overlay-q{background: none;z-index: 5;} C'est la place de l'étape 1.

    OriginalL'auteur Danny C

  5. 1

    Je ne sais pas si cela a changé récemment, mais j'ai pensé que je voudrais proposer une réponse pour jQuery Mobile 1.1.

    De fixer la largeur de toutes les boîtes de dialogue, vous devez ajouter la règle CSS suivante:

    .ui-dialog-contain { 
    max-width: 600px;
}

    Si vous ne voulez pas appliquer ce paramètre gobally, vous pouvez cibler une page individuelle/dialogue avec l'identifiant, par exemple:

    #my-dialog .ui-dialog-contain { 
    max-width: 600px;
}

    OriginalL'auteur JonnyReeves