Jekyll Share Modal

8th of December, 2016

A Jekyll powered blog needs a great way to share posts! This Bootstrap powered Modal makes it super easy! With just one line of code, you can have the default modal.

Adding Jekyll Share Modal

For the modal to function you will have to meet the depedencies. After this just copy and paste the code below into your document.

<script src="https://cdn.clarkhacks.com/JekyllShareModal/index.js"></script>

Options

var jkShrOptions = {
    // FOR TITLE IF SET TO 0 TITLE WILL NOT APPEAR
    "sTitle": "1",
    "customTitle": "Share",
    "QR": "1",
    "fb": "1",
    "tumblr": "1",
    "gplus": "1",
    "email": "1",
    "twitter": "1",
    "instapaper": "0",
    // CUSTOM EMBED CODE IF SET TO "A" IT WILL DEFAULT TO THE BOOTSTRAP CARD. "0" WILL SHOW NOTHING. SET TO 1 -> CUSTOM EMBED CODE
    "Embed": "A",
    "cEmbed": "",
    // IF SET TO 0 NO WARNING WILL BE SHOWN -> ELSE IT WILL SHOW TEXT BELOW
    "warningLabel": "The embed code reqiures that you have Bootstrap on your site."
};

Custom Styles

CSS Classes

.embed-post {
  width: 100%;
}

.embed-post-text textarea {
  min-width: 100%;
  width: 100%;
  overflow-y: scroll;
  resize: none;
  border-radius: 4px;
 border-color: #60cff7;
}
.embed-post-text {
  width: 100%;
}
.post-share-modal p {
  color: #fff;
}
.btn-social {
  margin-top: 5px;
}
.post-share-modal {
  background-color: #383838;
}
#windowurl {
  overflow-x: hidden;
  border-radius: 4px;
  border-color: #60cff7;
}

Calling It

To call the modal to the screen just add a button with the following toggle and target.

 <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#shareModal">Share</button>

Last Update

January 26th, 2017.

License

Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/

Check back for Updates!