Question

我正在尝试使用答案to this question来准确实现用户想要做的事情。

我基本上是在你点击一个链接时出现一个弹出窗口，当你点击除弹出窗口之外的任何地方它会关闭，如果你点击打开它的链接，它也会关闭它。

我遇到的问题是当我点击链接时没有任何反应，当我删除它打开但未关闭的所有stopPropagation内容时。

这是我的JavaScript：

function close_popovers(){
    $('.new_tooltip').remove();
}

function toggle_popover(user_id){
    $('.new_tooltip').show();
    var position = $('#link_' + user_id).position();

    var top_position = (position.top - $('.new_tooltip').outerHeight()) - 10;
    var left_position = (position.left - ($('.new_tooltip').outerWidth() / 2) + ($('#link_' + user_id).outerWidth() / 2));

    $('.new_tooltip').css ({
        top: top_position + "px",
        left: left_position + "px"
    });
    return false;
}

$(document).click(function() {
    close_popovers();
});
$(".new_tooltip, .stoppropagation").click(function(e) {
    e.stopPropagation();
    return false;
});

以下是打开popover的html链接：

<a href="#" id="link_34" class="stoppropagation" onclick="toggle_popover(34); return false;">Adam Tester</a>

最后是我的popover的html：

<div class="new_tooltip" id="popover_34" style="display:none; top:0px; left:0px; position:absolute; z-index:1000;">
    <div class="top">
        <div class="picture">
            <div class="userphotomedium">
                <img class="actual_photo" src="image url" width="31" height="31" />
            </div>
        </div>
        <div class="infomation">
            <div class="name main_text_colour">Name</div>
            <div class="role">Department of Science and Research - Subdivision 3</div>
        </div>
        <div class="buttons">
            <div class="closebtn_con">
                <div class="crossbtn" style="float:none;"></div>
            </div>
            <div class="viewbtn_con">
                <a href="#" id="viewbio_34" class="button buttonmini biobtns" style="width: 48px;"><div>View Bio</div></a>
            </div>
        </div>
        <div class="floatfix"></div>
    </div>
    <div class="bottom">
        <dl>
            <dt>Department</dt>
            <dd class="main_text_colour">Medical, Business Unit Head</dd>

            <dt>Country</dt>
            <dd class="main_text_colour">United Kingdom</dd>

            <dt>Email</dt>
            <dd class="main_text_colour">adam.tester@edge.co.uk</dd>

            <dt>Contact Number</dt>
            <dd class="main_text_colour">01832 300097</dd>

            <dt>Mobile Number</dt>
            <dd class="main_text_colour">07710 664 689</dd>
        </dl>
        <div class="bio" id="bio_34" style="background-color:#FFFFFF; position:relative; z-index:100;">
            <div class="main_text_colour" style="font-weight:bold;">Biography</div>
            <div id="bio_width_34" style="white-space:pre-wrap; overflow-y:scroll; height:100px; width:100px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        </div>
    </div>
</div>

Answer 1

检查代码中的一些错误：

使用$(".new_tooltip, .stoppropagation")代替$(".new_tooltip .stoppropagation")。
$('.new_tooltip').remove();将删除弹出窗口，您无法再次显示它。请改为$('.new_tooltip').hide();。
在您的代码中，点击链接时始终show弹出窗口。请尝试$('.new_tooltip').toggle();或检查当前状态，并相应地检查show，hide。

使用stopPropagation单击任何位置但使用某个元素

1 个答案: