抱歉标题模糊。我想知道是否有任何框架可以用来制作类似 Gmail 的电子邮件窗口。例如，对于发表评论，我目前正在使用带有 Twitter Bootstrap 的模式，但这涵盖了所有网站，我想要一些更小但功能相同的东西。如果不是框架，这种窗口有名称吗？
最佳答案
你可以尝试这样的事情。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Note Test Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- styles the div that holds the editable text area -->
<style>
#note-container {
position: fixed;
top: 110px;
left: 18px;
transform: translate(0%, 0%);
background: #fff;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
padding: 10px;
width: 550px;
z-index:8;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px 0px;
display: none;
}
</style>
</head>
<body>
<main class="container">
<div>
<button type="button" class="btn btn-primary" onclick="openNote();">Show Note</button>
</div>
</main>
<!-- the note with editable textarea, hidden until the button is clicked -->
<div id="note-container">
<textarea id='note' name='notes' rows='12' style="width: 495px;" contenteditable="true"></textarea>
<button type="button" class="btn btn-primary" onclick="closeNote();">Close Note</button>
</div>
<!-- Required libraries
–––––––––––––––––––––––––––––––––– -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Scripts
–––––––––––––––––––––––––––––––––– -->
<script>
var focused; // variable to remember what was previously focused
//open the note
function openNote() {
focused = document.activeElement // remember the activeElement
$( '#note-container' ).show();
$( '#note' ).focus();
}
//close the note
function closeNote() {
$( '#note-container' ).hide();
$( focused ).focus(); // return focus to the last activeElement
}
</script>
</body>
</html>
关于html - 窗口 html 框架中的窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43022261/