Jquery气泡弹出出现在点击文本框上

jquery bubblepopup to appear onclick on a textbox

本文关键字：文本气泡 Jquery 更新时间：2023-09-26

所以我想要实现的是一个弹出窗口，显示自己给用户一旦他们点击文本框。我使用的jquery冒泡弹出插件，但我似乎不能分配它点击功能。有两个功能，一个滚动和一个点击，我把它们分开了。

$(document).ready(function () {
    $('#info-header').CreateBubblePopup({
        innerHtml: $('#info-pop').html(),
        themeName: 'all-grey',
        themePath: '../content/themes/jquerybubblepopup-theme',
        position: 'right',
        align: 'middle',
        tail: 'right',
        innerHtmlStyle: {
            color: '#FFFFFF',
            'text-align': 'left'
        }
    });

    $('#Password').click(function(){
        var popup_button = $(this);
        popup_button.CreatebubblePopup({
         themeName: 'all-grey',
            themePath: '../content/themes/jquerybubblepopup-theme',
            position: 'top',
            align: 'top',
            tail: 'bottom',
            width: '250px',
            innerHtml: '<p>Password Requirements</p><ul><li>Must be at least 6 characters</li> <li>Must include at least 3 of the 4 following items:<ul><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
            innerHtmlStyle: {
                color: '#FFFFFF',
                'text-align': 'left',
                'margin-top': '0'
            }
        });
        popup_button.FreezeBubblePopup();
        $('#Password').click(function(){
            $(popup_button).HideBubblePopup();
        });
    });
});

所以我找到了解决方案，我有一个小字母作为id。我从按钮点击切换到对焦，并使用模糊来取消或消除效果。

 $(document).ready(function () {
        $('#Password').focus(function () {
            var popup_button = $(this);
            popup_button.CreateBubblePopup({
                themeName: 'all-grey',
                themePath: '../content/themes/jquerybubblepopup-theme',
                position: 'top',
                align: 'top',
                tail: 'bottom',
                width: '250px',
                mosueOver: 'hide',
                innerHtml: '<p style="font-weight:bold;font-size:13px;">Password Requirements</p><ul style="margin-left:-25px;"><li>Must be at least 6 characters</li> <li>Must have 3 of the following:<ul style="margin-left:-25px;"><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
                innerHtmlStyle: {
                    color: '#FFFFFF',
                    'text-align': 'left',
                    'margin-top': '-10px',
                    'font-size' : '12px',
                    'padding' : '0 10px'
                }
            });
            popup_button.ShowBubblePopup();
            popup_button.FreezeBubblePopup();
            $('#Password').blur(function () {
                popup_button.UnfreezeBubblePopup();
                popup_button.RemoveBubblePopup();
            });

        });
    });