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>