Window within window html framework

Question

sorry for the vague title. I was wondering if there's any framawork I could use to make something like Gmail's compose an email window. For example for posting comments, I'm currently using a Modal with Twitter Bootstrap, but that covers all the website, I want something smaller but just as functional. If not a framework, is there a name for this kind of window?

You can set the size of a Twitter Boostrap modal: http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box — nb1987, Mar 25 '17 at 21:41
@nb1987 Thanks, but I'm looking for a solution that does not suspend control of the rest of the website — Duxducis, Mar 25 '17 at 21:41

glass duo · Answer 1 · 2017-03-26T01:59:39.937

You could try something like this.

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

Window within window html framework

1 Answers1