我一直在网络上搜索很长一段时间,关于如何在窗口中获取窗口,而不仅仅是一个弹出窗口。窗口内的HTML窗口
例如,点击 “RyanM” 此页上:
做到这一点:
但你怎么做,是有可能只用HTML和CSS做?
我一直在网络上搜索很长一段时间,关于如何在窗口中获取窗口,而不仅仅是一个弹出窗口。窗口内的HTML窗口
例如,点击 “RyanM” 此页上:
做到这一点:
但你怎么做,是有可能只用HTML和CSS做?
纯HTML和CSS 模态窗口
你可以达到你想要这样的:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
不错的一个与css – Akshay
碰到这个,不错的工作! –
其所谓的UI术语和它多种形式对话是由普通的HTML元素(如DIV等)制作而成的。您只需使用CSS悬停伪类即可达到相同的效果。但是您需要使用JavaScript在onClick上启动它。
然而,jQuery UI的有自带的模态功能:
$(function() {
$("#dialog").dialog();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
#dialog {
display: none;
position: absolute;
top: 20px;
left: 50%;
margin-left: -150px;
width: 300px;
background: #eee;
padding: 20px;
}
.dialogueContainer:hover #dialog {
display: block;
}
<div class="dialogueContainer">
<button>Show Dialogue</button>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog win
dow can be moved, resized and closed with the 'x' icon.</p>
</div>
</div>
试试这个Fiddle
$('#a').click(function(){
$('.h').toggle()
});
.h{
display:none;
position:absolute;
width:200px;
height:200px;
background-color:orange;
box-shadow:0px 0 5px;
border-radius:10px;
}
.h img{
margin:5px;
width:80px;
height:80px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="a">click</div>
<div class="h">
<img src="http://placekitten.com/300/301"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
名称是模态窗口或灯箱 –
哦,那是不是技术上的窗户,他们只是看起来像和模态窗口工作。看看http://getbootstrap.com/javascript/#modals – meskobalazs