jQueryモーダルが正しく動作していません

以下のコードダイアログボックスが正しく表示されていますが、モーダルが正しく表示されません。私はz-indexをボックスに適用したいが、その影響はない。添付のスクリーンショットをご覧ください。私の問題をよりよく理解することができます。助けてくださいありがとうございます。jQueryモーダルが正しく動作していません

$(document).ready(function(){ 
 
    $("#new_attachment_div").dialog({ autoOpen: false }); 
 
    $("#register").click(function(){ 
 
    $("#new_attachment_div").dialog({ 
 
     autoOpen: true, 
 
     draggable: false, 
 
     resizable: false, 
 
     position: 'center', 
 
     height: 'auto', 
 
     width: '60%', 
 
     modal: true, 
 
     title: "New Attachment Type", 
 
     position: { 
 
     my: "center", 
 
     at: "center", 
 
     of: window 
 
     } 
 
    }); 
 
    }); 
 
});

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="new_attachment_div"> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
    <p>Hellow</p> 
 
</div>