3

我正在尝试使用这个问题的答案来准确实现该用户想要做的事情。

我基本上是在制作一个弹出框，当您单击链接时会出现，当您单击弹出框以外的任何位置时，它会关闭，如果您单击打开它的链接，它也会关闭它。

我遇到的问题是当我单击链接时没有任何反应，当我删除它打开但没有关闭的所有 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;
});

这是打开弹出框的 html 链接：

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

最后是我的弹出框的 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>
4

1 回答 1

1

检查代码中的一些错误：

  • 使用$(".new_tooltip, .stoppropagation")而不是$(".new_tooltip .stoppropagation").
  • $('.new_tooltip').remove();将删除弹出窗口，您将无法再次显示它。试试$('.new_tooltip').hide();吧。
  • 在您的代码中，show单击链接时始终会弹出窗口。尝试$('.new_tooltip').toggle();或检查当前状态，并show相应地检查hide。
于 2013-06-25T14:23:15.480 回答