2016-09-27 4 views
0

asp.net C#을 사용하여 모달 팝이 나타나지 않고 예제가 하나 있지만 asp.net C# web forms를 사용하여 작동하지 않습니다.asp.net을 사용하여 모달 팝업이 나타나지 않습니다. C#

다음은 나의 디자인 코드입니다.

<style type="text/css"> 

body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; } 

.ui-dialog-osx { 
-moz-border-radius: 0 0 8px 8px; 
-webkit-border-radius: 0 0 8px 8px; 
border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px; 
} 
</style> 
<link href="jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 

$("#dialog-message").dialog({ 
    modal: true, 
    draggable: false, 
    resizable: false, 
    position: ['center', 'top'], 
    show: 'blind', 
    hide: 'blind', 
    width: 400, 
    dialogClass: 'ui-dialog-osx', 
    buttons: { 
     "I've read and understand this": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 


setInterval(function() { 
    $('#dialog-message').dialog('open'); 
    setTimeout(function() { 
     $('#dialog-message').dialog('close'); 
    }, 1000) 
}, 2000); 

</script> 

다음은 내 신체 설계 코드입니다. http://jsfiddle.net/92jv0erw/을하지만 팝업이 몸에 텍스트 만 보여주는 표시되지 않습니다 :

<body> 
<form id="form1" runat="server"> 
<div> 
    <p> 
     Hello World! 
    </p> 
    <div id="dialog-message" title="Important information"> 
     <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float: left; 
      margin: 0 7px 0 0;"></span></span> 
     <div style="margin-left: 23px;"> 
      <p> 
       We're closed during the winter holiday from 21st of December, 2010 until 10th of 
       January 2011. 
       <br /> 
       <br /> 
       Our hotel will reopen at 11th of January 2011.<br /> 
       <br /> 
       Another line which demonstrates the auto height adjustment of the dialog component. 
      </p> 
     </div> 
    </div> 
</div> 
</form> 
</body> 

나는 작업 바이올린을 시도하고있다.

1) 원래 코드에서 jQuery를 jQuery와 UI에 대한 참조가 없습니다 :

+0

페이지에 jQuery 및 jQueryUI 스크립트가 포함되어 있습니까? 위의 스 니펫에 언급되어 있지 않습니다. 내가 볼 수있는 CSS는 포함 시켰지만 자바 스크립트 라이브러리는 포함하지 않았습니다. 브라우저 콘솔에 오류가 발생했을 수 있습니다. – ADyson

+0

예이 스크립트를 얻을 수있는 위치는 포함하지 않았습니다. @ADyson – zahed

+0

http://jquery.com/ 및 http://jqueryui.com/에서 다운로드하십시오. 또는 CDN https://code.jquery.com/ – ADyson

답변

0

주석에 이어 채팅, 원래의 문제의 부부가 코드를 기록했다. 이러한 스크립트에 대한 참조가 포함되어야합니다.

2) 대화 상자를 설정하려고하는 JS 코드가 참조하는 HTML 요소가 존재하기 전에 실행 중입니다. 스크립트가 페이지에서 위에 있기 때문에 스크립트가 요소가 브라우저에 실제로 나타나기 전에 실행되므로, 그것을 일으키는 원인이된다. 가장 간단한 해결책은 스크립트를 HTML 마크 업 아래로 이동하는 것입니다. 따라서 <script type="text/javascript"> 블록과 그 모든 내용을 페이지 하단으로 이동해야합니다. 감지 할 수있는 위치는 </form></body> 종료 태그 사이입니다.

관련 문제