Question

抱歉这个模糊的标题。我想知道是否有任何框架可以用来制作类似Gmail的电子邮件窗口。例如，对于发表评论，我目前正在使用带有Twitter Bootstrap的Modal，但是这涵盖了所有网站，我想要更小但功能更强的东西。如果不是框架，这种窗口是否有名称？

Answer 1

你可以尝试这样的事情。

<!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框架内的窗口

1 个答案: