Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <!-- External dependencies -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
        <script src="//aui-cdn.atlassian.com/aui-adg/5.9.0/js/aui.js"></script>
        <script src="//aui-cdn.atlassian.com/aui-adg/5.9.0/js/aui-experimental.js"></script>
        <script src="//aui-cdn.atlassian.com/aui-adg/5.9.0/js/aui-datepicker.js"></script>
        <link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/5.9.0/css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/5.9.0/css/aui-experimental.css"/>
        <!-- / External dependencies -->
    </head>
    <body>
        <nav class="aui-header aui-dropdown2-trigger-group" role="navigation" data-aui-responsive="true">
                <h1 id="logo" class="aui-header-logo aui-header-logo-aui"><a href="http://example.com/"><span class="aui-header-logo-device">AUI</span></a></h1></nav>
        <section id="content" role="main">
            <header class="aui-page-header">
                <div class="aui-page-header-inner">
                    <div class="aui-page-header-image">
                        <span class="aui-avatar aui-avatar-large aui-avatar-project">
                            <span class="aui-avatar-inner">
                                <img alt="Atlassian logo" src="https://s3.amazonaws.com/uploads.hipchat.com/10804/576067/xDSzXnjbCKWdeDh/upload.png">
                            </span>
                        </span>
                    </div>
                    <div class="aui-page-header-main">
                        <ol class="aui-nav aui-nav-breadcrumbs">
                            <li><a href="http://example.com/">JIRA</a></li>
                            <li><a href="http://example.com/" class="custom">Configure</a></li>
                            <li class="aui-nav-selected">About Doge</li>
                        </ol>
                        <h1>Doge</h1>
                    </div>
                    <div class="aui-page-header-actions">
                        <div class="aui-buttons">
                            <button class="aui-button">Share</button>
                            <button class="aui-button">Delete</button>
                            <button class="aui-button">Save</button>
                        </div>
                    </div>
                </div>
            </header>
            <div class="aui-page-panel">
                <div class="aui-page-panel-inner">
                    <section class="aui-page-panel-content">
                        <button id="dialog-show-button" class="aui-button">Show dialog</button>                    </section>
                </div>
            </div> 
        </section>
        <section role="dialog" id="demo-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true">
          <header class="aui-dialog2-header">
          <h2 class="aui-dialog2-header-main">Dialog</h2>
          </header>
          <div class="aui-dialog2-content">
        <form class="aui actorform" action="#" name="jiraform" id="actorform" method="post">
      <div class="content">
    <div class="field-group">
  <label for="summary">Actor<span class="aui-icon icon-required">Required</span></label>
  <input type="text" value="" name="actor" id="actor" class="text" data-aui-validation-field required>
    </div>
​
      </div>
        </form>
          </div>
        </section>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
cyberdashpro
0viewers