jQuery UI

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的悬停Pseudo类可以实现相同的效果。但是你需要使用JavaScript在onClick上启动它。

但是，jQuery UI内置了Modal功能：

http://jqueryui.com/dialog/

jQuery UI

＆＃13;

  $(function() {
    $( "#dialog" ).dialog();
  });

＆＃13;

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

＆＃13;

CSS hover

＆＃13;

#dialog {  
  display: none;
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  background: #eee;
  padding: 20px;
}

.dialogueContainer:hover #dialog {  
  display: block;
  
}

＆＃13;

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

＆＃13;

Answer 3

试试这个Fiddle

＆＃13;

$('#a').click(function(){
    $('.h').toggle()
});

＆＃13;

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

＆＃13;

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

＆＃13;

窗口内的HTML窗口

3 个答案:

jQuery UI

CSS hover