Показать конкретный модальный в зависимости от URL с помощью jquery - PullRequest
1 голос
/ 01 мая 2019

Как мне показать конкретный модал в зависимости от URL?

Я использую в качестве адаптивного фреймворка Bootstrap.

У меня есть два мода (на самом деле их много):

  1. privvilege_10
  2. privvilege_11

Модалы открываются с использованием url и jquery:

$(document).ready(function() {

  if(window.location.href.indexOf('#privilege_10') != -1) {
    $('#privilege_10').modal('show');
  }

});
$(document).ready(function() {

  if(window.location.href.indexOf('#privilege_11') != -1) {
    $('#privilege_11').modal('show');
  }

});

Если URL-адрес index.php # privilege_10 , то будет открыт модальный режим privilege_10 , а если URL-адрес index.php # privilege_11 , тогда , privilege_11 модальное будет открыт.

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

Так как я могу сделать это, просто написав код один раз? (как зацикливание)

if(window.location.href.indexOf('#privilege_10') != -1) это можно изменить, чтобы проверить, содержит ли URL-адрес # привилегия , если да :

$('#privilege_10').modal('show'); это должно быть изменено на $('what ever the url contains [#privilege_10 or #privilege_11]').modal('show'); Так же, как мы делаем в php ($_GET[''])

Ответы [ 2 ]

0 голосов
/ 01 мая 2019

Вы можете попытаться получить привязку по URL, а затем убедиться, что это правильно, и, если это так, вызвать модал.

Функция, которую я бы сделал:

$(function () {
    var anchor = window.location.hash;
    if (anchor.split('_')[0] == '#privilege') {
       $(anchor).modal('show');
    }
}
0 голосов
/ 01 мая 2019

Вместо того, чтобы проверять конкретный модальный тип, пусть хеш-значение URL будет идентификатором модального. Поэтому все, что вам нужно сделать, это получить значение хеша, а затем использовать его для вызова модального типа.

$(window.location.hash).modal('show');

Если модального не существует, ничего не произойдет. Если это произойдет, модал покажет. Обратите внимание, что в этом примере нет никаких проверок для window.location.hash.

...