<button class='button-blue' id='test1' onclick='custom1();'>地図を表示</button>
<button class='button-green' id='test1' onclick='custom3();'>Youtubeを表示</button>
<button class="button-blue" onclick="custom2();">HTMLもOK</button>
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

body {
    padding: 50px;
    font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #777;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    margin: 0 0 20px;
}

p, ul, ol, table, pre, dl {
    margin: 0 0 20px;
}

h1, h2, h3 {
    line-height: 1.1;
}

h1 {
    font-size: 28px;
}

h2 {
    color: #393939;
}

h3, h4, h5, h6 {
    color: #494949;
}

a {
    color: #39c;
    font-weight: 400;
    text-decoration: none;
}

a:hover {
    color: #069;
}

a small {
    font-size: 11px;
    color: #777;
    margin-top: -0.6em;
    display: block;
}

a:hover small {
    color: #777;
}

.wrapper {
    width: 860px;
    margin: 0 auto;
}

blockquote {
    border-left: 1px solid #e5e5e5;
    margin: 0;
    padding: 0 0 0 20px;
    font-style: italic;
}

code, pre {
    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
    color: #333;
    font-size: 12px;
}

pre {
    padding: 8px 15px;
    background: #f8f8f8;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid #e5e5e5;
}

dt {
    color: #444;
    font-weight: 700;
}

th {
    color: #444;
}

img {
    max-width: 100%;
}

header {
    width: 270px;
    float: left;
    position: fixed;
}

header ul {
    list-style: none;
    height: 40px;
    padding: 0;
    background: #eee;
    background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
    background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
    border-radius: 5px;
    border: 1px solid #d2d2d2;
    box-shadow: inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
    width: 270px;
}

header li {
    width: 89px;
    float: left;
    border-right: 1px solid #d2d2d2;
    height: 40px;
}

header li:first-child a {
    border-radius: 5px 0 0 5px;
}

header li:last-child a {
    border-radius: 0 5px 5px 0;
}

header ul a {
    line-height: 1;
    font-size: 11px;
    color: #999;
    display: block;
    text-align: center;
    padding-top: 6px;
    height: 34px;
}

header ul a:hover {
    color: #999;
    background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#ddd));
    background: -webkit-linear-gradient(top, #fff 0%,#ddd 100%);
    background: -o-linear-gradient(top, #fff 0%,#ddd 100%);
    background: -ms-linear-gradient(top, #fff 0%,#ddd 100%);
    background: linear-gradient(top, #fff 0%,#ddd 100%);
}

header ul a:active {
    -webkit-box-shadow: inset 0px 2px 2px 0px #ddd;
    -moz-box-shadow: inset 0px 2px 2px 0px #ddd;
    box-shadow: inset 0px 2px 2px 0px #ddd;
}

strong {
    color: #222;
    font-weight: 700;
}

header ul li + li {
    width: 88px;
    border-left: 1px solid #fff;
}

header ul li + li + li {
    border-right: none;
    width: 89px;
}

header ul a strong {
    font-size: 14px;
    display: block;
    color: #222;
}

section {
    width: 500px;
    float: right;
    padding-bottom: 50px;
}

small {
    font-size: 11px;
}

hr {
    border: 0;
    background: #e5e5e5;
    height: 1px;
    margin: 0 0 20px;
}

footer {
    width: 270px;
    float: left;
    position: fixed;
    bottom: 50px;
}

@media print, screen and (max-width: 960px) {
  
    div.wrapper {
        width: auto;
        margin: 0;
    }

    header, section, footer {
        float: none;
        position: static;
        width: auto;
    }

    header {
        padding-right: 320px;
    }

    section {
        border: 1px solid #e5e5e5;
        border-width: 1px 0;
        padding: 20px 0;
        margin: 0 0 20px;
    }

    header a small {
        display: inline;
    }

    header ul {
        position: absolute;
        right: 50px;
        top: 52px;
    }
}

@media print, screen and (max-width: 720px) {
    body {
        word-wrap: break-word;
    }

    header {
        padding: 0;
    }

    header ul, header p.view {
        position: static;
    }

    pre, code {
        word-wrap: normal;
    }
}

@media print, screen and (max-width: 480px) {
    body {
        padding: 15px;
    }

    header ul {
        display: none;
    }
}

@media print {
    body {
        padding: 0.4in;
        font-size: 12pt;
        color: #444;
    }
}


/*Adding Minimal Buttons */


.button-white {
    color: #333;
    padding: 5px 10px;
    letter-spacing: 1px;
    background: #FFF;
    font-weight: 600;
    border: 3px solid #FFF;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Button White:hover */

.button-white:hover {
    color: #FFF;
    border: 3px solid #FFF;
    background: none;
}

/* Button Blue */

.button-blue {
    color: #FFF;
    padding: 5px 10px;
    letter-spacing: 1px;
    background: #74bee1;
    font-weight: 600;
    border: 3px solid #74bee1;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Button Blue:hover */

.button-blue:hover {
    color: #74bee1;
    border: 3px solid #74bee1;
    background: none;
}


/* Button Green */

.button-green {
    color: #FFF;
    padding: 5px 10px;
    letter-spacing: 0px;
    background: #95d074;
    font-weight: 600;
    border: 3px solid #95d074;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/* Button Green:hover */

.button-green:hover {
    color: #95d074;
    border: 3px solid #95d074;
    background: none;
}

/* Minimal Buttons */

.scroll-none {
    overflow: hidden !important;
}
 
   


    .put2{

      background-color:#fff;
    }
/*|--uglipop.js--|
|--(A Minimalistic Pure JavaScript Modal )--|
|--Author : argunner (gunnerar7@gmail.com)(http://github.com/argunner)--|
|--Contributers : Add Your Name Below--|*/

window.onload = function() {

    var overlay = document.createElement('div');
    var content_fixed = document.createElement('div');
    var popbox = document.createElement('div');
    var overlay_wrapper = document.createElement('div');
    content_fixed.id = 'uglipop_content_fixed';
    content_fixed.setAttribute('style', 'position:fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);opacity:1;');
    popbox.id = 'uglipop_popbox';
    overlay_wrapper.id = "uglipop_overlay_wrapper";
    overlay_wrapper.setAttribute('style', 'position:absolute;top:0;bottom:0;left:0;right:0;');
    overlay.id = "uglipop_overlay";
    overlay.setAttribute('style', 'position:fixed;top:0;bottom:0;left:0;right:0;opacity:0.3;width:100%;height:100%;background-color:black;');
    overlay_wrapper.appendChild(overlay);
    content_fixed.appendChild(popbox);
    document.body.appendChild(overlay_wrapper);
    document.body.appendChild(content_fixed);
    document.getElementById('uglipop_overlay_wrapper').style.display = 'none';
    document.getElementById('uglipop_overlay').style.display = 'none';
    document.getElementById('uglipop_content_fixed').style.display = 'none';
    overlay_wrapper.addEventListener('click', remove);
    window.addEventListener('keypress', function(e) {
        //kill pop if button is ESC ;)
        if (e.keyCode == 27) {
            remove();
        }
    });
}



function uglipop(config) {

    if (config) {
        if (typeof config.class == 'string' && config.class) {
            document.getElementById('uglipop_popbox').setAttribute('class', config.class);
        }
        if (config.keepLayout && (!config.class)) {
            document.getElementById('uglipop_popbox').setAttribute('style', 'position:relative;height:300px;width:300px;background-color:white;opacity:1;');
        }

        if (typeof config.content == 'string' && config.content && config.source == 'html') {
            document.getElementById('uglipop_popbox').innerHTML = config.content;
        }

        if (typeof config.content == 'string' && config.content && config.source == 'div') {

            document.getElementById('uglipop_popbox').innerHTML = document.getElementById(config.content).innerHTML;

        }




    }

    document.getElementById('uglipop_overlay_wrapper').style.display = '';
    document.getElementById('uglipop_overlay').style.display = '';
    document.getElementById('uglipop_content_fixed').style.display = '';


}

//overlay_wrapper.click(function(){

function remove() {
    document.getElementById('uglipop_overlay_wrapper').style.display = 'none';
    document.getElementById('uglipop_overlay').style.display = 'none';
    document.getElementById('uglipop_content_fixed').style.display = 'none';
}
 
  

var custom1 = function(){
        uglipop({class:'put',source:'html',content:'<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d414895.2111496369!2d139.46068054017593!3d35.667919120148376!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b857628235d%3A0xcdd8aef709a2b520!2z5p2x5Lqs6YO95p2x5Lqs!5e0!3m2!1sja!2sjp!4v1563803576750!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>'});}

      var custom2 = function(){
        uglipop({class:'put2',source:'html',content:'<h1>見出し</h1>HTMLだってOKです'});}

      var custom3 = function(){
        uglipop({class:'none',source:'html',content:'<iframe width="560" height="315" src="https://www.youtube.com/embed/jKcBZlPHC3o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'});}
        
      var rem = function(){
        remove();
      }
      //var button = document.getElementById("test1").addEventListener("click",custom1);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.