html jQuery的でモーダルウィンドウ
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html jQuery的でモーダルウィンドウ相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modal window</title>
</head>
<body>
<style>
#modal-content {
z-index: 2;
display: none;
position: fixed;
width: 50%;
margin: 0;
padding: 10px 20px;
border: 2px solid #AAA;
background: #FFF;
}
#modal-overlay {
z-index: 1;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: rgba(220, 220, 240, 0.75);
}
#modal-open {
cursor: pointer;
color: #00f;
text-decoration: underline;
}
#modal-open:hover {
color: #f00;
}
</style>
<a id="modal-open"><ruby>「世界」!!<rp>(</rp><rt>ザ・ワールド</rt><rp>)</rp></ruby></a>
<div id="modal-content">
<div id="modal-close">そして時は動き出す</div>
</div>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript">
$(function() {
var $MODAL_CONTENT = $("#modal-content");
$(window).resize(function() {
$MODAL_CONTENT.css({
top: ($(window).height()
- $MODAL_CONTENT.outerHeight(true)) / 2,
left: ($(window).width()
- $MODAL_CONTENT.outerWidth(true)) / 2
})
}).resize();
$("#modal-open").click(function() {
$("body").append('<div id="modal-overlay"></div>');
$("#modal-overlay").fadeIn("slow");
$MODAL_CONTENT.fadeIn("slow");
});
$(document).on("click", "#modal-close, #modal-overlay", function() {
$MODAL_CONTENT.fadeOut("slow");
$("#modal-overlay").fadeOut("slow");
$("#modal-overlay").remove();
});
});
</script>
</body>
</html>
以上是关于html jQuery的でモーダルウィンドウ的主要内容,如果未能解决你的问题,请参考以下文章
csharp 统一のシーンファイルリストウィンドウ。全てのシーン,ビルド登录シーンを切り替え可。
apache_conf テキスト入力确认ウィンドウサンプル
python ウィンドウをマウスでクリックすると図形を描画
python 画面外にふっとんだ玛雅のウィンドウを救出する
html クリックでモーダルを表示。ホバーで表示非表示の切替え。アコーディオンを作成
html jQuery属性を追加して别ウインドウを开く