窗口內的HTML窗口

Question

我一直在網絡上搜索很長一段時間，關於如何在窗口中獲取窗口，而不僅僅是一個彈出窗口。

例如，點擊 「RyanM」 此頁上：

做到這一點：

但你怎麼做，是有可能只用HTML和CSS做？

Answer 1

純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; 
} 

DEMO HERE

Answer 2

其所謂的UI術語和它多種形式對話是由普通的HTML元素（如DIV等）製作而成的。您只需使用CSS懸停僞類即可達到相同的效果。但是您需要使用JavaScript在onClick上啓動它。

然而，jQuery UI的有自帶的模態功能：

http://jqueryui.com/dialog/

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>

CSS懸停

#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>

Answer 3

試試這個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>