Popup

by Viet Phan

HTML

<script src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Norican' rel='stylesheet' type='text/css'>
<div class="but">
    <button id="0" style="padding:20px;">Open popup</button>
    <button id="1" style="padding:20px;">Open popup 2</button>
</div>

CSS

.white-popup {
    position: relative;
    /* background: rgb(241,244,245); 
    background: rgba(241,244,245,0.8); */
    background: #f1f4f5; 
    padding: 0px;
    width: auto;
    height:auto;
    max-width: 500px;
    margin: 10px auto;
    -webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 80px;
border-radius: 10px;
border-bottom-right-radius: 80px;
}

.imageContainer {
    text-align: center;
    /*padding: 3px;*/
}
.titleContainer {
    padding: 10px 10px 10px;
    background: #e67259;
    -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;    
}

.titleText {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight:700;
    font-style: italic;
    color: #fff; 
    }

.textContainer {
    min-height: 60px;
    padding: 10px 10px 10px;
    background: #c4f1ea;
    vertical-align:text-top;
    -webkit-border-bottom-right-radius: 80px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 80px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 80px;
border-bottom-left-radius: 10px;
    
}

.textDes {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight:400;
}

.mfp-imageLinkUrl {
    max-width:100%;
    max-height: 300px;
    vertical-align:middle;
    margin: 3px 0px;
}
======Zoom effect======*/ .mfp-zoom-in {
    /* start state */
    .mfp-with-anim {
        opacity: 0;
        transition: all 0.2s ease-in-out;
        transform: scale(0.8);
    }
    &.mfp-bg {
        opacity: 0;
        transition: all 0.3s ease-out;
    }
    /* animate in */
    &.mfp-ready {
        .mfp-with-anim {
            opacity: 1;
            transform: scale(1);
        }
        &.mfp-bg {
            opacity: 0.8;
        }
    }

JavaScript

// Define data for the popup
var data = [{
    "order": "0",
        "city": "Rome",
        "country": "Italy",
        "latitude": "41.9028",
        "longitude": "12.4964",
        "dateVisited": "Jun 2008",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo scelerisque elit a varius. ",
        "imageLinkUrl_img": "http://www.aclassofherown.com/wp-content/uploads/2015/02/Amanzi-6.jpg"
}, {
    "order": "1",
        "city": "Paris",
        "country": "France",
        "latitude": "48.8566",
        "longitude": "2.3522",
        "dateVisited": "Jun 2008",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo scelerisque elit a varius. ",
        "imageLinkUrl_img": "http://www.aclassofherown.com/wp-content/uploads/2015/02/Amanzi-7.jpg"
}];

// initalize popup
$('.but > button').click(function () {
    var x = this.id; //to pick the correct entry for each marker
    console.log(x);

    $.magnificPopup.open({
        key: 'my-popup',
        mainClass: 'mfp-zoom-in',
        items: data[x],
        type: 'inline',
        inline: {
            // Define markup. Class names should match key names.
            markup: '<div class="white-popup"><div class="mfp-close"></div>' +
                '<div class="titleContainer">' +
                '<span class="titleText">'+
                '<span class="mfp-city"></span>' +
                '<span>,&nbsp;</span>' +
                '<span class="mfp-country"></span>' +
                '<span>&nbsp;–&nbsp;</span>' +
                '<span class="mfp-dateVisited"></span>' +
                '</span>' +
                '</div>' +
                '<div class="imageContainer">' +
                '<div class="mfp-imageLinkUrl"></div>' +
                '</div>' +
                '<div class="textContainer">' + 
                '<div class="textDes">' +
                '<div class="mfp-description"></div>' +
                '</div>' +
    ...