사용자 정의 확인 대화 상자

Question

function deleteRecordDialog() { 
    var returnThis; 
    var numRecordss = recs.length; 
    var html = "" 
    /*html= html +'<div id="popupContainer" style="width:' + width + 'px; height: ' + height + '; display: block;">'; 
    html= html + '<div id="popupInner">'; 
    html= html + '<div id="popupFrame">'; 
    html= html + '<div class="margin15px dialog-messages">';*/ 
    html= html + '<table>'; 
    html= html + '<tr>'; 
    html= html + '<td class="warning-icon-cell"></td>'; 
    html= html + '<td style="padding-left: 5px;">'; 
    if (numAddresses == 1) { 
     html = html + '<p>You have chosen to delete a contact.</p>'; 
    } 
    else { 
     html = html + '<p>You have chosen to delete ' + numAddresses + ' contact(s).</p>'; 
    } 
    html= html + '<p>Are you sure you wish to proceed?</p>'; 
    html= html + '</td>'; 
    html= html + '</tr>'; 
    html = html + '</table>'; 
    if (numAddresses == 1) { 
     html = html + '<div class="add-postage-submit-buttons"><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="returnThis=true; CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>'; 
    } 
    else { 
     html = html + '<div class="add-postage-submit-buttons"><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="returnThis=true; CloseDialog();"/>&nbsp;&nbsp;<input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>'; 
    } 
    html = html + '</div>'; 
    html = html + '</div>'; 
    html = html + '</div>'; 
    html = html + '</div>'; 
    OpenDialog(html, 350, 180, false, "Delete Contact") 
    return returnThis; 
} 

이제 대개 저는 거짓/참을 할당하기 위해 JQuery를 사용하고 모달을 true로 설정 하겠지만 jquery를 사용하지는 않습니다. 이 사용자 정의 대화 상자를 사용할 수있는 방법이 있습니까?

JQuery없이 다음을 수행 할 수있는 방법이 있습니까?

$("#dialogInfo").dialog({ 
    modal: true 
}); 

Answer 1

jQuery-ui- 대화 상자는 막 뒤에서 대화 상자의 모양을 내기 위해 많은 JavaScript 코드를 실행합니다.

CSS를 사용하여 동일한 기능을 대부분 수행 할 수 있습니다.

정확하게 여기 무엇을 할 지 알려주지는 않겠지 만 일반적인 방향으로 알려 드리겠습니다.

처음에는 대화 상자 내용이 포함될 div을 만들 수 있습니다. ID는 dialog입니다.

CSS에서는 원하는 너비와 높이와 함께 position:fixed과 display:none 및 z-index:9999으로 지정하십시오. 크기가 정확히 무엇인지 알면 JavaScript 코드를 작성하여 화면 중앙에 배치 할 수 있습니다. 대화 상자를 표시하려면 display 속성을 block으로 설정하십시오. 또한 배경색과 테두리를 지정해야합니다. 이렇게하면 문서의 일부분을 대화 상자와 같은 모양으로 표현할 수 있습니다.

사용자가 페이지의 다른 것을 클릭 할 수 없도록 대화 상자 뒤에 '마스크'를 표시하려면 id가 mask 인 다른 div를 만듭니다. 그것을이 CSS 속성을 보내기 position:fixed, top:0px, left:0px, height:100%, width:100%, display:none 배경 색상 : 블랙 , Z- 인덱스 : 9998 , 불투명 : 0.8 . When you want to display the dialog as modal, set this div's 디스플레이뿐만 아니라 property to block`.

마지막으로 jQuery-ui-dialog는 [Tab] 키 누름을 캡처하여 모달 대화 상자 안에 키보드 포커스를 유지합니다. 원한다면 언제든지이 작업을 수행하십시오.

해피 코딩!