Отображение всплывающего окна jQuery на указателе мыши - PullRequest
Новая
       7

Отображение всплывающего окна jQuery на указателе мыши

0 голосов
/ 29 декабря 2011

На странице ASPX я хотел бы, чтобы всплывающее окно отображалось в закрытой координате xy того места, где выполняется указатель мыши (аналогично строке состояния Windows, когда при наведении курсора мыши мы видим что-то рядом с ней.)

Так что на моей странице ASPX в настоящее время у меня есть jquery, который показывает диалог в центре страницы (он маскирует страницу ASPX в белый цвет, а затем отображает фактический контент в виде всплывающего окна), но я хотел бы показать всплывающее окно ближе к указателю мыши без маскировки страницы aspx.

На странице ASPX есть несколько ссылок на jquery. Ниже находится страница ASPX. 

<asp:Content ContentPlaceHolderID="PageScript" runat="server">
    <div class="inline">
        <a href="#" tabindex="-1" class="question-quality"></a>
        <span>Quality:</span>
    </div>

<div id="dialog_product-quality" class="dialog-content" style="display: none;">
    <div class="dialog-content-padding">
        <p>
             <asp:Literal runat="server" ID="ProductQualityContentText" />
        </p>
    </div>
</div>

<link type="text/css" href="/store/javascript/css/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/javascript/jquery.ui.core.js"></script>
<script type="text/javascript" src="/javascript/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/javascript/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/javascript/jquery.ui.slider.js"></script>
<script type="text/javascript" src="/javascript/jquery151.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#dialog_product-quality').dialog(dialog_options);

$('a.Quality').hover(function(e){
   e.preventDefault();
   openDialogWindow('div#dialog_product-quality', 'Product Quality');
});
</script>
</asp:Content>

Пожалуйста, предложите.

спасибо.

1 Ответ

1 голос
/ 29 декабря 2011

Цитировать OP:

... Я хотел бы, чтобы всплывающее окно отображалось в координате закрытия xy, где выполняется указатель мыши ...

... На странице ASPX есть несколько ссылок на jquery ...

... Пожалуйста, предложите.

Плагин jQuery, qTip2 , даст вамвозможность иметь всплывающую подсказку или модальное окно, следуя указателю мыши, если это то, что вы спрашиваете.См. Демонстрацию отслеживания мыши ниже.

http://craigsworks.com/projects/qtip2/demos/#mouse

jsFiddle Demo с кодом

Загрузите и включите qTip2 JavaScript &CSS-файлы. 

<div id="demo-mouse" class="box">
    <h3>Hover over this box to see mouse tracking in action</h3>
</div>


$(document).ready(function()
{
    $('#demo-mouse').qtip({
        content: 'I position myself at the current mouse position',
        position: {
            my: 'top left',
            target: 'mouse',
            viewport: $(window), // Keep it on-screen at all times if possible
            adjust: {
                x: 10,  y: 10
            }
        },
        hide: {
            fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
        },
        style: 'ui-tooltip-shadow'
    });
});
...