Закрытие элемента при клику за его пределами

Чаще всего при создании модальных окон внутри них делают кнопку для их закрытия, например обычный крестик. Такой вариант отличный и его отбрасывать не стоит, можно даже в паре с ним использовать и метод с данной статьи.

О том как сделать подобные окна, подробно мы останавливаться не будем. На моем сайте есть много статей на подобные темы.

Теперь подробнее о скрипте. Он работает на основе jQuery,поэтому, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки нужно подключить наш скрипт.
Выглядит скрипт так:
$(document).mouseup(function (e){
var modalctr = $("#modal_cinw_ctnr");
var modal = $(".modal_cinw");
if (!modal.is(e.target) && modal.has(e.target).length === 0){
modalctr.hide();
}
});

Скрипт имеет важные параметры, настройка которых нужна для корректной работы скрипта.

$(document).mouseup(function (e){ - эта строка определяет, что скрипт будет работать когда отпущена любая из стандартных клавиш мыши.

var modalctr = $("#modal_cinw_ctnr"); - создаем переменную. В данном случаи это родительский контейнер окна. В примере это затемненная область поверх сайта. Иногда такой области нет, все зависит от типа вашего окна или другого элемента который вы хотите скрыть по клику вне его области.
#modal_cinw_ctnr - это айди нашего родительского контейнера. Меняйте на свой нужный.

var modal = $(".modal_cinw"); - создаем вторую переменную. Как раз эта переменная и является нашим окном, нажимая вне его области и будет скрываться именно оно. .modal_cinw - класс нашего окна. Вы можете менять на айди или класс, вашего элемента, что нужно скрыть.

if (!modal.is(e.target) && modal.has(e.target).length === 0){ - в этой строке мы определяем был ли совершен клик по нашему главному элементу, то бишь по окну или нет, а также по его дочерних элементах, что размещены внутри. Если это не они, то переходим далее.

modalctr.hide();
- скрываем наш родительский контейнер, первую переменную - modalctr. То бишь нажимая вне окна, мы скрываем область, что затемняет сайт, внутри которой и лежит окно. Если у вас нет родителя, а нужно скрыть просто элемент из переменной modal. То есть строка будет иметь такой вид - modal.hide();
Далее, просто закрываем скобки.
Если вы настроите все правильно то результат не заставит себя ждать.

На этом все, спасибо за внимание.

Добавлено: 19 Июня 2019 14:04:48 Добавил: Андрей Ковальчук

Ссылка дня

Пример кода, выбирающего страницу этого дня. Завтра будет показана другая страница.

<html>
<head>
<script language="JavaScript">
function GetTodaysURL()
{
  var locationlist = new URLList
  (
        "1.html",         // Monday
        "2.html",         // Tuesday
        "3.html",
        "4.html",
        "5.html",
        "6.html",
        "7.html"          // Sunday
  );

  now = new Date();
  num = now.getDay();
  if (num == 0) num = 7;

  location.href = locationlist.list[num-1];
}

function URLList ()
{
  var argv = URLList.arguments;
  var argc = argv.length;
  this.list = new Object();
  for (var i = 0; i < argc; i++)
  this.list[i] = argv[i];
  this.count = argc;
  return this;
}
</script>
</head>
<body>
Пример кода, выбирающего
<a href="javascript:GetTodaysURL()">
страницу этого дня</a>.
Завтра будет показана другая страница.
</body>
</html>

Добавлено: 15 Июня 2019 07:04:51 Добавил: Андрей Ковальчук

Проложить маршрут на Яндекс.Картах с помощью API

Пример отображения на карте маршрута от Белорусского вокзала до Лефортово:

ymaps.route(['Москва, Белорусский вокзал', 'Москва, Лефортово'], {mapStateAutoApply:true}).then(
  function(route) {
    map.geoObjects.add(route);
    alert('Длина маршрута = ' + route.getHumanLength());
  },
  function(error) {
    alert('Невозможно построить маршрут');
  }
);

Написанное актуально для
Яндекс.Карты API 2

Добавлено: 30 Июля 2018 08:21:48 Добавил: Андрей Ковальчук

Автоматическое масштабирование и центрирование гугло-карты для показа всех маркеров

Дано — гугло-карта с неизвестным количеством маркеров.

Задача — автоматически смасштабировать и отцентрировать карту таким образом, чтобы было видно все маркеры.

Решение — использовать класс LatLngBounds, позволяющий определять область на карте:

// Создаём карту
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
 
// Маркеры
var markers = [
    ['Маркер 1', 45.21465, 65.14896],
    ['Маркер 2', 65.14896, 45.21465],
    // ...
];
 
// Область показа маркеров
var markersBounds = new google.maps.LatLngBounds();
 
for (var i = 0; i < markers.length; i++) {
    var markerPosition = new google.maps.LatLng(markers[i][1], markers[i][2]);
 
    // Добавляем координаты маркера в область
    markersBounds.extend(markerPosition);
 
    // Создаём маркер
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map,   
        title: markers[i][0],
    }); 
}
 
// Центрируем и масштабируем карту

map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));
Написанное актуально для
Google Maps API 3

Добавлено: 30 Июля 2018 08:15:13 Добавил: Андрей Ковальчук

Хранение массивов в localStorage

Пример хранения в переменной localStorage.foo массива из трёх элементов:

// запись
foo = ['bar1', 'bar2', 'bar3'];
localStorage.foo = JSON.stringify(foo);
 
// чтение
foo = localStorage.foo ? JSON.parse(localStorage.foo) : [];

Добавлено: 29 Июля 2018 22:46:54 Добавил: Андрей Ковальчук

Как подключить javascript файл из своего js скрипта

Пример подключения скрипта http://example.com/script.js:

Native javascript

var script = document.createElement('script');
script.src = 'http://example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(script);
alert('script loaded');

jQuery:

$.getScript('http://example.com/script.js', function(){
  alert('script loaded');
});

Добавлено: 29 Июля 2018 22:22:25 Добавил: Андрей Ковальчук

JavaScript strval function

A JavaScript equivalent of PHP’s strval

function strval (str) {
  // http://kevin.vanzonneveld.net
  // +   original by: Brett Zamir (http://brett-zamir.me)
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   bugfixed by: Brett Zamir (http://brett-zamir.me)
  // %        note 1: Comment out the entire switch if you want JS-like behavior instead of PHP behavior
  // -    depends on: gettype
  // *     example 1: strval({red: 1, green: 2, blue: 3, white: 4});
  // *     returns 1: 'Array'
  var type = '';

  if (str === null) {
    return '';
  }

  type = this.gettype(str);
  switch (type) {
  case 'boolean':
    if (str === true) {
      return '1';
    }
    return '';
  case 'array':
    return 'Array';
  case 'object':
    return 'Object';
  }

  return str;
}

Example 1
strval({red: 1, green: 2, blue: 3, white: 4});

Should return
'Array'

Добавлено: 27 Июля 2018 22:44:02 Добавил: Андрей Ковальчук

JavaScript print_r function

A JavaScript equivalent of PHP’s print_r

function print_r (array, return_val) {
  // http://kevin.vanzonneveld.net
  // +   original by: Michael White (http://getsprink.com)
  // +   improved by: Ben Bryan
  // +      input by: Brett Zamir (http://brett-zamir.me)
  // +      improved by: Brett Zamir (http://brett-zamir.me)
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // -    depends on: echo
  // *     example 1: print_r(1, true);
  // *     returns 1: 1
  var output = '',
    pad_char = ' ',
    pad_val = 4,
    d = this.window.document,
    getFuncName = function (fn) {
      var name = (/\W*function\s+([\w\$]+)\s*\(/).exec(fn);
      if (!name) {
        return '(Anonymous)';
      }
      return name[1];
    },
    repeat_char = function (len, pad_char) {
      var str = '';
      for (var i = 0; i < len; i++) {
        str += pad_char;
      }
      return str;
    },
    formatArray = function (obj, cur_depth, pad_val, pad_char) {
      if (cur_depth > 0) {
        cur_depth++;
      }

      var base_pad = repeat_char(pad_val * cur_depth, pad_char);
      var thick_pad = repeat_char(pad_val * (cur_depth + 1), pad_char);
      var str = '';

      if (typeof obj === 'object' && obj !== null && obj.constructor && getFuncName(obj.constructor) !== 'PHPJS_Resource') {
        str += 'Array\n' + base_pad + '(\n';
        for (var key in obj) {
          if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
            str += thick_pad + '[' + key + '] => ' + formatArray(obj[key], cur_depth + 1, pad_val, pad_char);
          }
          else {
            str += thick_pad + '[' + key + '] => ' + obj[key] + '\n';
          }
        }
        str += base_pad + ')\n';
      }
      else if (obj === null || obj === undefined) {
        str = '';
      }
      else { // for our "resource" class
        str = obj.toString();
      }

      return str;
    };

  output = formatArray(array, 0, pad_val, pad_char);

  if (return_val !== true) {
    if (d.body) {
      this.echo(output);
    }
    else {
      try {
        d = XULDocument; // We're in XUL, so appending as plain text won't work; trigger an error out of XUL
        this.echo('<pre xmlns="http://www.w3.org/1999/xhtml" style="white-space:pre;">' + output + '</pre>');
      } catch (e) {
        this.echo(output); // Outputting as plain text may work in some plain XML
      }
    }
    return true;
  }
  return output;
}

Example 1
print_r(1, true);

Should return
1

Добавлено: 27 Июля 2018 22:43:13 Добавил: Андрей Ковальчук

JavaScript isset function

A JavaScript equivalent of PHP’s isset

function isset () {
  // http://kevin.vanzonneveld.net
  // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: FremyCompany
  // +   improved by: Onno Marsman
  // +   improved by: Rafał Kukawski
  // *     example 1: isset( undefined, true);
  // *     returns 1: false
  // *     example 2: isset( 'Kevin van Zonneveld' );
  // *     returns 2: true
  var a = arguments,
    l = a.length,
    i = 0,
    undef;

  if (l === 0) {
    throw new Error('Empty isset');
  }

  while (i !== l) {
    if (a[i] === undef || a[i] === null) {
      return false;
    }
    i++;
  }
  return true;
}

Example 1
isset( undefined, true);

Should return
false

Example 2
isset( 'Kevin van Zonneveld' );

Should return
true

Добавлено: 27 Июля 2018 22:42:20 Добавил: Андрей Ковальчук

JavaScript is_unicode function

A JavaScript equivalent of PHP’s is_unicode

function is_unicode (vr) {
  // +   original by: Brett Zamir (http://brett-zamir.me)
  // %        note 1: Almost all strings in JavaScript should be Unicode
  // *     example 1: is_unicode('We the peoples of the United Nations...!');
  // *     returns 1: true
  if (typeof vr !== 'string') {
    return false;
  }

  // If surrogates occur outside of high-low pairs, then this is not Unicode
  var arr = [],
    any = '([\s\S])',
    highSurrogate = '[\uD800-\uDBFF]',
    lowSurrogate = '[\uDC00-\uDFFF]',
    highSurrogateBeforeAny = new RegExp(highSurrogate + any, 'g'),
    lowSurrogateAfterAny = new RegExp(any + lowSurrogate, 'g'),
    singleLowSurrogate = new RegExp('^' + lowSurrogate + '$'),
    singleHighSurrogate = new RegExp('^' + highSurrogate + '$');

  while ((arr = highSurrogateBeforeAny.exec(vr)) !== null) {
    if (!arr[1] || !arr[1].match(singleLowSurrogate)) { // If high not followed by low surrogate
      return false;
    }
  }
  while ((arr = lowSurrogateAfterAny.exec(vr)) !== null) {
    if (!arr[1] || !arr[1].match(singleHighSurrogate)) { // If low not preceded by high surrogate
      return false;
    }
  }
  return true;
}

Example 1
is_unicode('We the peoples of the United Nations...!');

Should return
true

Добавлено: 27 Июля 2018 22:41:31 Добавил: Андрей Ковальчук

JavaScript is_string function

A JavaScript equivalent of PHP’s is_string

function is_string (mixed_var) {
  // http://kevin.vanzonneveld.net
  // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // *     example 1: is_string('23');
  // *     returns 1: true
  // *     example 2: is_string(23.5);
  // *     returns 2: false
  return (typeof mixed_var === 'string');
}

Example 1
is_string('23');

Should return
true

Example 2
is_string(23.5);

Should return
false

Добавлено: 27 Июля 2018 22:40:48 Добавил: Андрей Ковальчук

JavaScript is_scalar function

A JavaScript equivalent of PHP’s is_scalar

function is_scalar (mixed_var) {
  // http://kevin.vanzonneveld.net
  // +   original by: Paulo Freitas
  // *     example 1: is_scalar(186.31);
  // *     returns 1: true
  // *     example 2: is_scalar({0: 'Kevin van Zonneveld'});
  // *     returns 2: false
  return (/boolean|number|string/).test(typeof mixed_var);
}

Example 1
is_scalar(186.31);

Should return
true

Example 2
is_scalar({0: 'Kevin van Zonneveld'});

Should return
false

Добавлено: 27 Июля 2018 22:40:00 Добавил: Андрей Ковальчук

JavaScript is_resource function

A JavaScript equivalent of PHP’s is_resource

function is_resource (handle) {
  // http://kevin.vanzonneveld.net
  // +   original by: Brett Zamir (http://brett-zamir.me)
  // +   improved by: Luis Salazar (http://www.freaky-media.com/)
  // *     example 1: is_resource('a');
  // *     returns 1: false
  var getFuncName = function (fn) {
    var name = (/\W*function\s+([\w\$]+)\s*\(/).exec(fn);
    if (!name) {
      return '(Anonymous)';
    }
    return name[1];
  };
  return !(!handle || typeof handle !== 'object' || !handle.constructor || getFuncName(handle.constructor) !== 'PHPJS_Resource');
}

Example 1
is_resource('a');

Should return
false

Добавлено: 27 Июля 2018 22:39:12 Добавил: Андрей Ковальчук

JavaScript is_real function

A JavaScript equivalent of PHP’s is_real

function is_real (mixed_var) {
  // http://kevin.vanzonneveld.net
  // +   original by: Brett Zamir (http://brett-zamir.me)
  //  -   depends on: is_float
  // %        note 1: 1.0 is simplified to 1 before it can be accessed by the function, this makes
  // %        note 1: it different from the PHP implementation. We can't fix this unfortunately.
  // *     example 1: is_double(186.31);
  // *     returns 1: true
  return this.is_float(mixed_var);
}

Example 1
is_double(186.31);

Should return
true

Добавлено: 27 Июля 2018 22:38:29 Добавил: Андрей Ковальчук

JavaScript is_object function

A JavaScript equivalent of PHP’s is_object

function is_object (mixed_var) {
  // http://kevin.vanzonneveld.net
  // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Legaev Andrey
  // +   improved by: Michael White (http://getsprink.com)
  // *     example 1: is_object('23');
  // *     returns 1: false
  // *     example 2: is_object({foo: 'bar'});
  // *     returns 2: true
  // *     example 3: is_object(null);
  // *     returns 3: false
  if (Object.prototype.toString.call(mixed_var) === '[object Array]') {
    return false;
  }
  return mixed_var !== null && typeof mixed_var === 'object';
}

Example 1
is_object('23');

Should return
false

Example 2
is_object({foo: 'bar'});

Should return
true

Example 3
is_object(null);

Should return
false

Добавлено: 27 Июля 2018 22:37:53 Добавил: Андрей Ковальчук