Window.open (…)을 사용하지 않는 모달 DHTML 창으로 리팩터링하는 방법은 무엇입니까?
-
04-07-2019 - |
문제
이와 같이 JavaScript 창을 시작하는 함수가 있습니다.
function genericPop(strLink, strName, iWidth, iHeight) {
var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
var new_window="";
new_window = open(strLink, strName, parameterList);
window.self.name = "main";
new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
new_window.focus();
}
이 기능은 웹 응용 프로그램의 다른 장소에서 약 52 번 호출됩니다.
DHTML 모달 팝업 창을 사용하려면이 코드를 다시 얻고 싶습니다. 변화는 가능한 한 눈에 잘 띄지 않아야합니다.
이 솔루션을 기존 솔루션과 동등하게 유지하려면 다음을 수행해야한다고 생각합니다.
- 창을 "닫으"는 손잡이를 제공하십시오.
- 창을 움직일 수없고 화면 중앙에 위치합니다.
- 배경을 옵션으로 흐리게합니다.
나는 생각했다 이 솔루션 내가 원하는 것에 가장 가깝지만 그것을 통합하는 방법을 이해할 수 없었습니다.
편집 : 여러분 몇 명이 나에게 좋은 리드를주었습니다. 고맙습니다. 그러나 여기서 내 문제를 다시주게하겠습니다. 기존 코드를 다시 요약하고 있습니다. 현재 HTML 또는 CSS에 대한 변화를 피해야합니다. 이상적으로는 GenericPop (...)의 함수 서명을 동일하게 유지 하여이 효과를 달성하고 싶습니다.
해결책
다음은 jQuery 및 jQuery UI 라이브러리를 사용하는 솔루션입니다. API가 변경되지 않았습니다 , 그러나 매개 변수 '이름'은 무시됩니다. 나는 사용한다 iframe
주어진 내용을로드합니다 strLink
그리고 그것을 표시합니다 iframe
어린이로서 생성됩니다 div
, 그런 다음 jQuery를 사용하여 모달 팝업으로 변환됩니다.
function genericPop(strLink, strName, iWidth, iHeight) {
var dialog = $('#dialog');
if (dialog.length > 0) {
dialog.parents('div.ui-dialog').eq(0).remove();
}
dialog = $(document.createElement('div'))
.attr('id', 'dialog')
.css('display', 'none')
.appendTo('body');
$(document.createElement('iframe'))
.attr('src', strLink)
.css('width', '100%')
.css('height', '100%')
.appendTo(dialog);
dialog.dialog({
draggable: false,
modal: true,
width: iWidth,
height: iHeight,
title: strName,
overlay: {
opacity: 0.5,
background: "black"
}
});
dialog.css('display', 'block');
}
// example of use
$(document).ready(function() {
$('#google').click(function() {
genericPop('http://www.google.com/', 'Google', 640, 480);
return false;
});
$('#yahoo').click(function() {
genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
return false;
});
});
다른 팁
나는 이것을 사용한다 대화 코드 거의 똑같은 일을합니다.
올바르게 기억되면 기본 구현이 대화 상자 크기 조정을 지원하지 않습니다. 하나의 크기만으로 만들 수없는 경우 코드 또는 CSS를 수정하여 여러 너비를 표시 할 수 있습니다.
사용법은 쉽습니다.
showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');
다중 너비를 지원하기 위해 JS 수정 :
속성으로 너비와 높이를 추가하여 대화 상자 기능을 표시하고 68 행에 대화 상자 및 대화 상자 요소로 설정하십시오.
노력하다 컨트롤, 프로토 타입이 필요합니다
내가 사용하는 방법은 다음과 같습니다.
<a href="/messages/new" class="popup_window">New Message</a>
그리고 내 JavaScript 파일에서 :
$(document).observe("dom:loaded", function() {
$$("a.popup_window").each(function(element) {
new Control.Modal(element, { overlayOpacity: 0.75,
className: 'modal',
method: 'get',
position: 'center' });
});
});
이제 현재 열린 팝업을 닫으려면 다음과 같습니다.
Control.Modal.current.close()