JQueryが作成した拡大効果のpopupダイアログボックス(jquery pluginは追加されていません)共有
4107 ワード
多くは言わないで、テーマに直行して、1つの拡大効果のpopup dialogを分かち合って、プロジェクトの中で自分の需要によってcssを書くことができて、私はmetroスタイルのsiteに多重化するつもりです.
アニメーション効果はcoolのように見えますが、処理後の効果を加えるとより良いです.
アニメーション効果はcoolのように見えますが、処理後の効果を加えるとより良いです.
<br/><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"/>
<br/><style>
<br>body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }
<br>ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; }
<br>#transition {
<br>background:transparent;
<br>display:none;
<br>position:absolute; top:50%; left:50%; z-index:50;
<br>z-index: 10001;
<br>}
<br>#content {
<br>background:#fff;
<br>border:1px solid #666;
<br>margin:-50px 0 0 -50px;
<br>width:100px; height:100px;
<br>z-index: 10001;
<br>}
<br>#mask{
<br>position: absolute;
<br>top: 0;
<br>left: 0;
<br>width: 100%;
<br>height: 100%;
<br>background-color: #000000;
<br>display: none;
<br>z-index: 10000;
<br>}
<br>.close
<br>{
<br>width:30px;
<br>height:20px;
<br>background-color:Red;
<br>cursor:pointer;
<br>display:none;
<br>}
<br>.closeShow
<br>{
<br>width:30px;
<br>height:20px;
<br>margin-left:50px;
<br>margin-top:-100px;
<br>background-color:Red;
<br>cursor:pointer;
<br>}
<br></style>
<br/><script type="text/javascript">
<br>$(document).ready(function () {
<br>$('ul li').click(function (e) {
<br>$("#mask").fadeTo(500, 0.25);
<br>$("#content").html("<div>Loading....</div>");
<br>var $t = $('#transition'),
<br>to = $(this).offset();
<br>var height = $(document).height();
<br>var width = $(document).width();
<br>$('#content').css({ width: 100, height: 100 });
<br>$t.css({
<br>top: to.top + 50,
<br>left: to.left + 50,
<br>display: 'block'
<br>}).animate({
<br>top: height / 2,
<br>left: width / 2
<br>}, 600, function () {
<br>$(this).animate({
<br>top: 125,
<br>left: 175
<br>}, 600);
<br>$('#content').animate({
<br>width: width * 0.8,
<br>height: height * 0.8
<br>}, 600, function () {
<br>// open dialog here
<br>$("#content").html("<div>Hello, please put content here.</div>");
<br>});
<br>});
<br>});
<br>$('#transition').click(function (e) {
<br>$("#transition").hide();
<br>$("#mask").hide();
<br>});
<br>});
<br></script>
<br/>
<br/>
<br/><form id="form1" runat="server">
<br/><ul>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/><li>thumb</li>
<br/></ul>
<br/><div id="mask"/>
<br/><div id="transition"><div id="content">Loading....</div></div>
<br/></form>
<br/>
<br/>
<br/>
</code></pre>
<br/> mask ， 。
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>