Mobile Colorbox

Mobile First Colorbox

Mobile First Responsive Colorbox Window to open a link, div, code, about anything. Including a iframe using external data.

Using the provided code works with, jQuery 3.3.2 and Bootstrap 4 beta 3.

Colorbox if you have not used it was created by Jack Moore

I created a colorbox window for ASP.Net Core 2 app. On most Phone and Tablets, no matter the orientation Colorbox was way to small about 40% of the view.

On orientation change it flickered and tried to change sizes several times.

I searched around and found similar posts and came up with a small addition to the Initialization of colorbox.

Colorbox now is working perfect on my Android and some other phone’s I have tried. It now makes the colorbox windows 90% of the view on a normal website, and 90% on mobile.

I am building Mobile First sites now and it way to easy with Core 2 framework, with a Mobile First Agency Theme based on Bootstrap 4 beta 3 using colorbox for some internal views. Click to open the Page Code block or anything in a Colorbox Window

To use the Colorbox window by clicking a link that uses a class as class=”inline” and link it to the div with href=”#profiles”

<a class="inline" href="#profiles" title="Colorbox">Click to open in a Colorbox Window.</a>

Hide Content in a hidden div class=”hidden”

The css for hidden


The link is to a div with id=”profiles” Add Colorbox Content in the div with profiles

The Inline Code for inline code

    inline: !0,
    width: '100%',
    rel: 'proflex'
$('.inline_content').on('click', function() {
$('.inline_content').on('click', function() {

Below is the changed JavaScript with additions highlighted.

The JavaScript

    rel: "group1"
    rel: "group2",
    transition: "fade"
    rel: "group3",
    transition: "none",
    width: "80%",
    height: "80%"
    rel: "group4",
    slideshow: true
    iframe: true,
    innerWidth: 640,
    innerHeight: 390
    iframe: true,
    innerWidth: 500,
    innerHeight: 409
    iframe: true,
    width: "80%",
    height: "80%"
    inline: true,
    width: "80%"
    onOpen: function () {
      alert("onOpen: colorbox is about to open");
    onLoad: function () {
      alert("onLoad: colorbox has started to load the targeted content");
    onComplete: function () {
      alert("onComplete: colorbox has displayed the loaded content");
    onCleanup: function () {
      alert("onCleanup: colorbox has begun the close process");
    onClosed: function () {
      alert("onClosed: colorbox has completely closed");
    rel: "group5",
    transition: "none"
    rel: "group5",
    transition: "none",
    retinaImage: true,
    retinaUrl: true
  $("#click").click(function () {
      "background-color": "#f00",
      color: "#fff",
      cursor: "inherit"
    }).text("Open this window again and this message will still be here.");
    return false;
  var resizeTimer;
  //Mobile Resize Function
  function resizeColorBox() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
      if (jQuery("#cboxOverlay").is(":visible")) jQuery.colorbox.resize({
        width: "90%",
        height: "90%"
    }, 300);
  window.addEventListener("orientationchange", resizeColorBox, false);


Приветствую Вас дамы и господа[url=]![/url] Наша компания занимается свыше 10 лет ремонтом и обслуживанием оргтехники в городе Минске.Основные направления и виды нашей деятельности:

1)[url=]Заправка и восстановление картриджей[/url]

2)[url=]Ремонт и сервис оргтехники[/url]

3)[url=]Ремонт и настройка компьютеров и ноутбуков[/url]

4)[url=]SEO продвижение сайтов[/url]

5)[url=]Разработка сайтов[/url] Всегда рады помочь Вам!С уважением,ЧУП ТЕХНОСЕРВИС ВИКТОРИЯ.;u=5503

 Comment Form Moderated

Add A Page Review

Add A Rating: 
Please Agree to Our Terms and Conditions  *