如何在CSS3中制作类似于此的对话框？

我想打一个对话框，看起来在CSS3与此类似（减文本框和按钮，和忘记密码的链接）： enter image description here 如何在CSS3中制作类似于此的对话框？

我想我可以这样做：

<div id="mydialoguebox"> 
<h1>Authorization Required</h1> 
<div id="text"> 
Please review your account before continuing. 
<div> 
</div>

我遇到的问题是div顶部和h1标签之间似乎总是存在差距。我也不确定如何用x添加“close”图像。将所需授权和图像分别放入自己的div是否更好？我寻找最好的方式来做到这一点，没有JQuery UI或任何JavaScript。

来源

2012-07-05 Rolando

看一看jQuery的用户界面的对话框。它使这个对话框几乎到了T（不包括图像和颜色方案）。 – 2012-07-05 15:25:39

我不想使用JQuery-UI。 – Rolando 2012-07-05 15:25:58

我不建议你这样做，但是CSS库jQuery包含的UI元素（对话框，小工具等）与您提供的示例几乎完美匹配。它是开源的，很容易查看它们使用的是什么样式 - 只是为了您的目的修改它们。 – 2012-07-05 15:26:58

拨弄：

http://jsfiddle.net/insertusernamehere/t6f5v/

这里是我的，你怎么能建立这个基本理念。它需要一些进一步的改进，但目前，你可以从它开始。

CSS：

<style> 

    div.box { 
     width:   400px; 
     height:   200px; 
     margin:   20px; 
     border:   1px solid #ccc; 
     border-radius: 6px; 
    } 

    div.box > header { 
     height:   30px; 
     padding:  10px; 
     background:  #777; 
     color:   #333; 
    } 
    div.box > header > h1 { 
     float:   left; 
     font-size:  14px; 
     font-weight: normal; 
    } 
    div.box > header > a { 
     display:  inline-block; 
     float:   right; 
     width:   11px; 
     height:   11px; 
     margin-top:  10px; 
     background:  url(http://www.geocaching.com/images/stockholm/mini/close.gif) no-repeat 0 0; 
    } 

    div.box > section { 
     padding:  10px; 
    } 
    div.box > section form, div.box > section fieldset { 
     margin:   0; 
     padding:  0; 
     border:   0; 
    } 

</style>

HTML

<div class="box"> 
    <header> 
     <h1>Authorisation Required</h1> 
     <a href=""></a> 
    </header> 
    <section> 
     <p>Please verify your … 
     <form> 
      <fieldset> 
       <label>Username:</label> 
       <input type="text"> 
      </fieldset> 
     </form> 
    </section> 
</div>

来源

2012-07-05 15:37:40 insertusernamehere

你可以使用一些divs - 将它们放在一个接一个的位置。有一个颜色，另一个颜色。然后你可以使用一些奇特的CSS边界半径样式。

http://border-radius.com/

来源

2012-07-05 15:27:48 Davos555

如何在CSS3中制作类似于此的对话框？

回答

相关问题