Comment faire flotter une fenêtre modale jquery dans

Je suis à l'aide de l'INTERFACE utilisateur de jquery pour créer une fenêtre flottante. Je suis en mesure de créer de la fenêtre. Mais j'ai de la difficulté à la faire flotter. Je veux que la fenêtre doit être dans le coin supérieur droit de l' "corps". (maintenant vous pouvez voir sur la droite mais à fond) et je veux aussi faire le déplacement. Quand j'ai fait défiler la page, la fenêtre doit également faire défiler avec elle. par exemple, http://manos.malihu.gr/tuts/jquery-floating-menu.html

Voici le code que j'ai fait jusqu'à présent.

Vous trouverez le code sur http://jsfiddle.net/z8rW6/1/

Code Javascript:

$(document).ready(function(){


$("#dialog").dialog();


var $parent = $('#body');
var windowHeight = $(window).height();
var parentAbsoluteTop = $parent.offset().top;
var parentAbsoluteBottom = parentAbsoluteTop + $parent.height();
var topStop = parentAbsoluteTop + $( ".selector" ).dialog( "option", "height" );
$('#dialog').dialog({ width: 300,height: 600 }).dialog('widget').position({
       my: 'right top',
       at: 'right top',
       of: $('#body')
    });

$(window).scroll(function(event) {
    var windowBottom = $(window).scrollTop() + windowHeight;

if (windowBottom < topStop)

    $('.selector').dialog({ dialogClass: 'myPosition1' });
else if (windowBottom >= topStop && windowBottom <= parentAbsoluteBottom)
    $('.selector').dialog({ dialogClass: 'myPosition2' });
else
    $('.selector').dialog({ dialogClass: 'myPosition3' });

})

Code CSS:

#page{
    width:800px;
    margin:0 auto;
}
.myPosition1 {
position: 'absolute',
            top: '0px',
            bottom: 'auto',
            Right: '0'

}
.myPosition2 {
           position: 'fixed',
            top: 'auto',
            bottom: 'auto',
            Right: '0'
        }
 .myPosition3 {
         position: 'absolute',
        top: 'auto',
        bottom: '0px',
        Right: '0'
        }
#header{
    border:1px solid blue;
    height:15px;
    margin:8px;
}
#body{
    border:1px solid blue;
    height:5600px;
    margin:8px;
    position: relative;
}
#footer{
    border:1px solid blue;
    height:15px;
    margin:8px;
}
h1,h2{
    padding:16px;
}

#debug {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 100px;
    width: 100px;
    color: red;
}

Code Html:

<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script language="javascript" type="text/javascript" src='javascript/behaviour.js'></script>

</head>
<body style="font-size:62.5%;">
<div id="page">
 <div id="header"><h1>header</h1></div> 
    <div id="body" >
        <h1>content top -> when scrolling up the box should STOP here (at the line right above this text)</h1>
        <div id="dialog" title="Detailed FeedBack">I'm in a dialog </div>

        <span style="position: absolute; bottom: 0; ">content bottom -> when scrolling down the box should STOP here (at the line right below this text)</span>

    </div>
    <div id="footer"><h1>footer</h1></div>
    <div id="debug"></div>
</div>
</body>
</html>

J'ai créé un jsFiddle pour vous - jsfiddle.net/z8rW6. Votre exemple a une erreur de syntaxe. $zone n'est pas définie.
Merci, en Fait au lieu de la boîte, il devrait être à la hauteur de la fenêtre de dialogue

InformationsquelleAutor Judy | 2012-06-28

Cela devrait fonctionner avec votre code HTML, si vous devez augmenter #footerhauteur (comme à 400px) dans votre CSS pour être en mesure de confirmer que cela fonctionne :

var $d;
$(document).ready(function(){    
    var dlg_width = 300;
    var dlg_height = 200;
    var dlg_offset_x = $("#page").width() - dlg_width + 100;
    var dlg_margin_top = $("#header").outerHeight(true); //includeMargins=true
    var dlg_margin_bottom = $("#footer").outerHeight(true); //includeMargins=true

    $d = $('#dialog').dialog({
        width: dlg_width,
        height: dlg_height,
        position: [dlg_offset_x, dlg_margin_top]
    });

    $(window).bind('scroll', function(evt){
        var scrollTop = $(window).scrollTop();
        var bottom = $(document).height() - scrollTop;
            $d.dialog("option", {"position": [
                dlg_offset_x,
                ((dlg_margin_top - scrollTop > 0) ?
                    dlg_margin_top - scrollTop :
                        ((bottom - dlg_height > dlg_margin_bottom) ?
                            0 :
                            bottom - dlg_height - dlg_margin_bottom
                        )
                )
            ]});
    });
});

Vous pouvez la voir en direct ici : http://jsfiddle.net/5TFQy/10/

Remarque qu'il y a quelques quircks si:

dialogue colle à la droite de la fenêtre, quand il devrait s'en tenir à la droite de la #body. Ai-je raté quelque chose, ou est-ce une limitation de dialog()?
dlg_margin_bottom = $("#footer").outerHeight(true) n'est pas assez d'une valeur de pixel-parfaitement honneur à votre bas de la ligne bleue exigence. #body's de la marge et de la frontière tailles devraient certainement être ajouté. Essayé de garder ça ~~simple~~ pas compliqué.

Dernier mais non le moindre: l'ajout d'un certain assouplissement de la fonction ferait de la boîte de dialogue déplacer un aspect plus lisse.

InformationsquelleAutor Alain BECKER

🙂 Toutes ces réponses sont d'excellents moyens pour répondre à la question que vous techniquement demandé... comment le faire avec jQuery. Cependant - il est beaucoup plus facile de le faire avec une très simple CSS.

Exemple:

<head>
 <style type="text/css">
     .myDialog {
         padding: 5px 10px;
         background: yellow;
         border: 1px solid #999;

         position: fixed;  /* This is the magic - stays during scroll. */
         top: 0; right: 0; /* These coordinates are now in 
                              relation to the first parent
                              with non-static positioning (body) */
     }
     .hidden {
         display: none;
     }
 </style>
</head>
<body>
 <!-- The rest of your page -->

 <!-- Put your dialog at the end of the body (or the beginning) 
      This way you don't have to worry about it getting hung up 
      within the positioning boxes of any other elements -->

 <div class="myDialog hidden">
  This is my dialog content!
 </div>
</body>

<script type="text/javascript" language="javascript">
    //Now you can just toggle on and off the "hidden"
    //class to make the dialog hide/show.

    $('#SomeButton').bind('click', function (ev) {
        $('.myDialog').toggleClass('hidden');
    });
</script>

Exactement les mêmes principes peuvent être appliqués à votre boîte de dialogue Modale de le faire avancer avec le défilement de la page, et ce genre de chose.

Pour un exemple de travail de la ci-dessus, jetez un oeil à cette jsFiddle: http://jsfiddle.net/WSZXL/

InformationsquelleAutor Troy Alford

2

J'espère que cela va vous aider à:

http://jsfiddle.net/lytican/UxZKH/2/
- Ne semble pas répondre aux exigences...
- Dialogue flotte au-dessus de l'ensemble du document, y compris au-dessus de l'en-tête et pied de page. Voir ma réponse pour une solution qui flotte à l'intérieur de la zone du corps seulement, à l'exception de l'en-tête et pied de page comme requis.
- Vous avez raison. Probablement que j'ai raté
InformationsquelleAutor Nikolay Zakharov

Vous devez vous connecter pour publier un commentaire.