HTML 스타일이 고려되지 않았습니다.

Question

삭제하기 전에 JS 기능을 만들어서 확인합니다. 내 웹 사이트는 Foundation 5로 완료되었으며 반응 형입니다.

나는 한 묶음의 div를 그리드에 정렬하고 일부에는 삭제 버튼이 있습니다. 콘텐츠를 삭제하기 전에 확인 상자를 추가하고 싶습니다. 이 상자에 내용이있는 div를 표시하고 싶습니다. JS를 사용하여 콘텐츠 div의 너비와 높이를 가져옵니다 (반응 형이므로 크기는 데스크톱, 모바일 및 태블릿에서 동일하지 않습니다). 그런 다음 확인 상자를 만들고 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; 
}); 

여기에 문제의 이미지입니다 :

그것은 보이는이 확인 상자가 나는 아무것도 ...

HTML을하지 않았다처럼 크기가 너비처럼 작동하지만 사실이 아닙니다.

어떤 아이디어로 문제를 해결할 수 있습니까?

감사

Answer 1

가 나는 위치를 추가 문제 해결 : 절대, 상단과 오른쪽 대신 CSS의 HTML 내부에 남아.