asp.netを使用してモーダルポップアップが表示されないc＃

モーダルポップはasp.net C＃を使用して表示されていませんが、その例はasp.net C＃Webフォームを使用していません。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>

以下は私のボディデザインコードです。

<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>

私が働いてフィドルしようとしています：http://jsfiddle.net/92jv0erw/をしかし、ポップアップは、体内のテキストのみの上映を示していません。

出典

2016-09-27 zahed

あなたのページにjQueryとjQueryUIスクリプトが含まれていますか？上記のスニペットには記載されていません。私が見ることができるCSSは含まれていますが、javascriptライブラリは含まれていません。おそらくブラウザのコンソールにエラーがあります。 – ADyson

はい、私はこれらのスクリプトを入手できる場所からは含まれませんでした。 @ADyson – zahed

http://jquery.com/とhttp://jqueryui.com/からダウンロードしてください。またはCDN https://code.jquery.com/ – ADyson

のコメントに続いやチャット、問題のカップルは、もともと掲示コードにあります。

1）オリジナルのコードではjQueryやjQueryのUIへの言及はありません。これらのスクリプトへの参照を含める必要があります。

2）ダイアログボックスを設定しようとするJSコードは、参照するHTML要素が存在する前に実行されています。スクリプトはページ上にあるため、スクリプトは実際にブラウザに存在する前に実行されます。それが失敗する原因になります。これに対する最も簡単な解決策は、スクリプトをHTMLマークアップの下に移動することです。したがって、<script type="text/javascript">ブロックとそのすべての内容をページの下部に移動する必要があります。感覚的な場所は、</form>と</body>終了タグの間になります。

出典

2016-09-27 11:16:18 ADyson

asp.netを使用してモーダルポップアップが表示されないc＃

答えて

関連する問題