javascript - jqueryでモーダルウィンドウをフロートする方法

Question

jquery UI を使用してフローティングウィンドウを作成しています。ウィンドウを作成できます。しかし、私はそれを浮かせるのに苦労しています。ウィンドウが「本体」の右上隅にあることを望みます。（今は右に見えますが下にあります）そして私もそれを動かしたいと思っています。ページをスクロールすると、ウィンドウも一緒にスクロールする必要があります。例http://manos.malihu.gr/tuts/jquery-floating-menu.html

ここに私がこれまでに行ったコードがあります。

http://jsfiddle.net/z8rW6/1/でコードを見つけてください。

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' });

})

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

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>

score 5 · Accepted Answer

:)これらの答えはすべて、技術的に尋ねた質問を処理するための優れた方法です...jQueryでそれを行う方法。ただし、非常に単純なCSSを使用する方がはるかに簡単です。

例：

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

まったく同じ原則をモーダルダイアログに適用して、ページのスクロールに合わせて移動させることができます。

上記の実用的な例については、次のjsFiddleをご覧ください：http：//jsfiddle.net/WSZXL/

score 4 · Accepted Answer

これは HTML で動作するはずですが#footer、CSS での高さ (400px など) を増やして動作を確認できるようにする必要があります。

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
                        )
                )
            ]});
    });
});

ここでライブを見ることができます : http://jsfiddle.net/5TFQy/10/

ただし、いくつかの癖があることに注意してください。

ダイアログは、ビューポートの右側にくっつくはずですが、の右側にくっつき#bodyます。何か見逃していましたか、それともの制限dialog()ですか?
dlg_margin_bottom = $("#footer").outerHeight(true)下のブルーラインの要件をピクセル単位で完全に満たすには十分な値ではありません。#bodyの余白と境界線のサイズは必ず追加する必要があります。それを維持しようとした単純複雑ではありません。

score 2 · Accepted Answer

2

これがお役に立てば幸いです。

http://jsfiddle.net/lytican/UxZKH/2/

于 2012-06-29T12:36:24.807 に答える

javascript - jqueryでモーダルウィンドウをフロートする方法

3 に答える 3

Related

Reference