JavaScript + Ajax 実践サンプル集 - Overlay and Shadow Classes

Overlay and Shadow Classes

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのテーマを利用してOverlayとShadowクラスのデモを表示しています。

Firefoxで表示すると角丸で表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI - Demo1(Overlay and Shadow Classes)</title>
  <link href="jQuery/UI/ui.all.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/UI/ui.allplugins.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/UI/demos.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="demo" style=" width: 400px;">
	<h2 class="demoHeaders">Overlay and Shadow Classes</h2>
	<div style="position: relative; width: 96%; height: 250px; padding:1% 4%; overflow:hidden;" class="fakewindowcontain">
		<p>
		  Lorem ipsum dolor sit amet,  Nulla nec tortor. 
		  Donec id elit quis purus consectetur consequat. </p>
		<p>
		  Nam congue semper tellus. Sed erat dolor, dapibus sit amet, 
		  venenatis ornare, ultrices ut, nisi. Aliquam ante. 
		  Suspendisse scelerisque dui nec velit. Duis augue augue, 
		  gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p>
    <p>
      Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. 
      Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet,
      consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, 
      posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
    <p>
      Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, 
      ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. 
      Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. 
      Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. 
      Nam molestie scelerisque quam. </p>

<div class="ui-overlay">
		  <div class="ui-widget-overlay"></div>
		  <div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 30px;"></div>
    </div>
		<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 30px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
			<div class="ui-dialog-content ui-widget-content" style="border:0;">
				<p>
				  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
				  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
				  ut aliquip ex ea commodo consequat.</p>
			</div>
		</div>
	
	</div>
</div>
<br />
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Overlay and Shadow Classes

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Overlay and Shadow Classes

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!