HTML中的样式未考虑在内

Question

我正在创建一个JS功能，以便在删除之前进行确认。 我的网站已经完成了基金会5并且响应迅速。

我在网格中有一堆div对齐，有些则有一个删除按钮。我想在删除内容之前添加一个确认框。 我希望这个框能够涵盖具有内容的div。我使用JS来获取内容div的宽度和高度（因为它的响应速度，桌面，移动设备和平板电脑的大小不一样）。 然后我创建确认框并直接在html中放置宽度和高度。 它似乎有效但不考虑它们，根本不考虑。确认框的大小就像我什么都没做......

HTML：

<div class="article-item article-item-drafts item-with-delete">
    <div class="row">
        <div class="large-2 medium-2 small-2 columns"><img class="image-50" alt="W3 3, Le calice jusqu'à la lie" src="/img/livres/w3-3-le-calice-jusqu-a-la-lie@2x.png"></div>
        <div class="large-10 medium-10 small-10 columns">
            <p class="bookDraftTitle">W3 3, Le calice jusqu'à la lie</p>
            <p class="text-right bookDraftInfo">Modifiée le 29 mars 2016</p>
        </div>
        <div class="large-12 medium-12 small-12 columns">
            <hr>
            <p class="text-center regular">Brouillon</p>
            <p class="text-center bookDraftAction"><a title="Modifier" href="/mes-contributions/gerer-mes-critiques/modifier-857.html"><i class="fa fa-edit"></i> Modifier</a>
    &nbsp;-&nbsp;<a class="delete-content" title="Supprimer" href="/mes-contributions/gerer-mes-critiques/supprimer-857.html"><i class="fa fa-times-circle"></i> Supprimer</a></p>
        </div>
    </div>
</div>

JS：

$('.delete-content').click(function() {
    $articleItemLink = this.href;
    $articleItemDraft = $(this).closest('.item-with-delete');
    $articleItemDraftWidth = $articleItemDraft.width() + 20;
    $articleItemDraftHeight = $articleItemDraft.height() + 20;
    $articleItemDraftLink = $(this).closest('.item-with-delete');
    $articleItemDraft.css('position', 'relative')
    $articleItemDraft.append('<div class="item-with-delete-overlay" width="'+$articleItemDraftWidth+'px" height="'+$articleItemDraftHeight+'px">\n\
        <p>Êtes-vous sûr de vouloir supprimer cet élément ?</p>\n\
        <p class="callToAction"><a href="'+ $articleItemLink +'" class="item-with-delete-overlay-yes">Oui</a><a class="item-with-delete-overlay-no">Non</a></p>\n\
        </div>');
    $('.item-with-delete-overlay-no').click(function() {
        $('.item-with-delete-overlay').fadeOut(function(){
            $(this).remove();
        });
        return false;
    });
    $('.item-with-delete-overlay-yes').click(function() {
        return true;
    });

    return false;
});

这是问题的图像：

看起来宽度有效，但事实并非如此。

知道如何解决这个问题吗？

由于

Answer 1

我修正了在HTML中添加位置的绝对，左上角和右上角的问题。