1

私はこの Web ページを作成していて、ニュースを jquery.modal に表示したいのですが、共有機能、つまり URL を使用します。解決策として PJAX を見つけたので、リンクを URL に入れ、コンテンツをモーダル ウィンドウに表示したいと考えました。何日もグーグルで検索した後、私はこれに出くわしました。ページをクリックするとモーダルで開きますが、URL が表示されますが、どのように機能するかわかりません。ここにリンクがあります：http://rigaspots.blogspot.com/

これが私のコードです。

<link rel="stylesheet" href="../jquery.modal.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.pjax.js"></script>
<script src="../js/jquery.modal.js"></script>
<script type="text/javascript">


var direction = "right";
$(document).ready(function(){
$('a').pjax({
container: '.modal'
});

$('.modal').on('pjax:start', function() {
  $(this).addClass('loading')
})

$('.modal').on('pjax:end', function() {
  $(this).removeClass('loading')
})


});


</script>

<style> 

#main {
  font-family:Helvetica,Arial,sans-serif;   
  width:30%;  
  opacity: 1;
  transition: opacity 0.20s linear;
}

#main.loading {
   opacity: 0.5;
}   
h2 {margin-left:200px;}
   ul{padding-left:15px; list-style:none;}
</style> 

</head>
<body>
<p ><strong style='color:green'> 2012-10-25 16:52:13</strong> (Time should only change on     refresh!)</p><div id="main">
<h1>PJAX using PHP</h1>

<ul class='header'>
  <li><a href='trex.php' data-pjax='modal' rel="modal:open">Tyrannosaurus</a></li>
  <li><a href='kong.php' data-pjax='modal' rel="modal:open" >King Kong</a></li>
</ul>
</div>

ここで確認できます: http://supervalters.mplab.lv/source/

どんな助けでも大歓迎です。ありがとう。

4

0 に答える 0