Window.open (…)을 사용하지 않는 모달 DHTML 창으로 리팩터링하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/232662

  •  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 모달 팝업 창을 사용하려면이 코드를 다시 얻고 싶습니다. 변화는 가능한 한 눈에 잘 띄지 않아야합니다.

이 솔루션을 기존 솔루션과 동등하게 유지하려면 다음을 수행해야한다고 생각합니다.

  1. 창을 "닫으"는 손잡이를 제공하십시오.
  2. 창을 움직일 수없고 화면 중앙에 위치합니다.
  3. 배경을 옵션으로 흐리게합니다.

나는 생각했다 이 솔루션 내가 원하는 것에 가장 가깝지만 그것을 통합하는 방법을 이해할 수 없었습니다.

편집 : 여러분 몇 명이 나에게 좋은 리드를주었습니다. 고맙습니다. 그러나 여기서 내 문제를 다시주게하겠습니다. 기존 코드를 다시 요약하고 있습니다. 현재 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;
  });
});

jQuery UI/대화에 대한 문서.

다른 팁

나는 이것을 사용한다 대화 코드 거의 똑같은 일을합니다.

올바르게 기억되면 기본 구현이 대화 상자 크기 조정을 지원하지 않습니다. 하나의 크기만으로 만들 수없는 경우 코드 또는 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()
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top