페이지로드시 JQuery 대화 상자가 완전히 표시됨

Question

표준 JQuery UI 함수를 사용하여 JQuery 기반 대화 상자가있는 페이지를 만들었습니다. 나는 JQuery의 박스 기능과 함께이 작업을 수행한다.

<div id = "myDialog"> 
    <!-- ... more html in here for the dialog --> 
</div> 

그런 다음 JQuery와 자바 스크립트에서 호출 대화 상자에 <DIV> 변환 :

다시

// pruned .js as an example of kicking up a JQuery dialog 
    $('#myDialog').dialog({ 
     autoOpen: false, 
     title: 'Title here', 
     modal: true 
     } 
    }); 

, 일반 바닐라 JQuery와 다음 대화 상자 내 HTML이다. 따라서 상위 페이지의 링크를 클릭하면이 마법사가 시작되고 이미지 등이 포함 된 상당량의 HTML이있는 JQuery 대화 상자가 생성됩니다.

이 페이지를 계속 개발하면서 알기 시작했습니다. 브라우저에 페이지를로드했을 때 <div> 태그를 사용하여 JQuery가 대화 상자로 변환하는 태그를 매우 간략하게 표시했습니다. 그러면 페이지가 예상대로 작동합니다. 즉, 대화 상자가 숨겨지지 않고 페이지에서 잠깐 표시됩니다. 꽤보기 흉한 전문가답지 않은! 하지만 1 초도 지나면 페이지가 정확하게으로 렌더링되고 예상대로 표시됩니다.

시간이 지남에 따라 페이지 크기가 커짐에 따라 페이지가 잘못 렌더링 된 시간이 길어졌습니다. 내 생각 엔 브라우저의 렌더링 엔진이 페이지를 로딩 할 때 페이지를 렌더링하고 결국에는 <div>을 대화 상자로 변환하는 JQuery를 시작합니다. 이 JQuery 함수는 <div>을 JQuery 대화 상자로 변환하고 숨 깁니다 (autoOpen 속성을 false로 설정했기 때문에). 일부 브라우저 < 기침 > IE </기침 > 다른 사람보다 길게 표시합니다. 내 큰 대화가 이제 페이지가 약 1 초 동안 잘못 렌더링됩니다. YUCK!

Answer 1

는 기본적으로 숨겨져 있도록 일부 CSS를 추가 할 수가없는 온로드 코드가 필요하지 :이

#myDialog { display: none; } 

, 다른 코드는 대화 상자를 열 때이 스타일을 반대 것, 필요하지 않습니다 ... 그래서 document.ready에서 실행할 수있는 추가 항목이 없습니다.이 CSS로

<div id="myDialog" class="dialog"></div> 

: 당신이 대화 상자가 많이있는 경우 또는, 그것은이 같은 클래스를 제공 거의 모든 경우에

.dialog { display: none; } 

을, jQuery를 물건을 숨길 수있는 display 스타일 속성을 사용, 그래서 처음에 내가 & 태그 명명 규칙의 비트와 함께 CSS3 선택기를 사용하는 대화 상자, 간단한 .fadeIn() 등

Answer 2

괜찮 았던이 문제에 대한 해결책을 찾았지만 누군가가 더 좋은 방법을 알고 있는지 궁금합니다.

문제는 브라우저가 DOM을로드 할 때 브라우저를 렌더링 한 다음 숨기는 끝에 JQuery .js를 발생시키는 것입니다. 그래서 내가하고있는 일은 상위 노드 <div> 태그에서 가시성을 끄고 모든 대화 내용이 기본적으로 숨겨져 있으므로 해당 부모 <div> 태그가 .js가됩니다. 다음

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog"> 
     <!-- ... more html in here for the dialog --> 
    </div> 
</div> 

JQuery와의 .js :

<script type="text/javascript"> 

$(document).ready(function() { 
    //turn the visibility on last thing 
    $("#bodyDiv").attr("style", "visibility:visible"); 
}); 
</script> 

당신이 대화 내용을 표시 O를, 나는이 켜 승/페이지 렌더링, 그래서 난 그냥 기본적으로 모든의 가시성을 끄 볼 수 다시 가시성. 이것은 페이지를 1 초 만에 재미있게 만들 수 있기 때문에 완벽한 솔루션은 아니지만 적어도 대화 상자 HTML은 인라인으로 표시되지 않습니다. 이상적인 것은 아니지만이 수정 사항이있는 UX는 사용할 수 있습니다.

Answer 3

여부, 당신이 나중에 요소를 사용하여 원하는대로 작동합니다 뭔가를 숨기려면이를 사용. 내 모든 대화 상자는 <div> 요소이며 id는 항상 "dialog"로 끝납니다. 나는 다음이 CSS를 사용

div[id$=dialog] { display: none; } 

샘플 대화 : 사례 CSS3에서

<div id="my-sample-dialog" title="Sample Dialog"> 
     <span>I'm invisible!</span> 
</div> 

는 동일한 결과를 달성하기 위해 CSS2를 사용할 수 있지만, 좀 더 조심하지해야, 선택 사항이 아닙니다

div[id~=dialog] { display: none; } 

을하고 "내 샘플 대화"

같은 당신의 대화 ID를 설정 : 어떤 <div> ID에 대화 모니 커를 사용하여 숨겨진 수 없습니다

<div data-role="popup" class="popup"> 
    <!-- CONTENT --> 
</div> 

는 CSS

.popup { display:none; } 
.ui-popup-container .popup { display:block; } 

내가 처음에 숨길

HTML 팝업을 :

Answer 4

당신은 "팝업"보다는 "대화"를 사용하는 경우 나 다음을 수행했다 display : none을 사용하고 jQueryUI가 컨테이너에서 팝업을 래핑 한 후에 다른 스타일이 우선합니다.