Opracowuję wniosek, który zawiera niektóre strony, otworzy się po kliknięciu elementu menu. Nawet jeśli otwiera się wygląda jak wyskakująca strona, powinna mieć własny adres URL i jest osobną stroną. Podobnie jak w przypadku, w jaki sposób karty Trello są otwarte jako pop-up, ale także ma swój własny adres URL.

Jak mogę to zrobić i musi wiedzieć o technologii za tym materiałami?

Podskórne obrazy Trello dołączone poniżej.

Przed kliknięciem Link Card Trello

Karta Trello otwarta jako wyskakujące się z własnym adresem URL

2
nck001 24 czerwiec 2017, 20:43

3 odpowiedzi

Najlepsza odpowiedź

Wystarczy użyć Vue-routera. Twoje karty będą wyświetlane w niektórych pod-trasie, a Twoja strona "Board" lub strona główna będzie stroną główną.

Oto pobierz Rozpoczął się w Vue-router i poniższy kod roboczy :

const Card = { template: '#card-template' }

const routes = [
  { path: '/card/:id', component: Card },
]
const router = new VueRouter({routes})

new Vue({
  router,
  el: "#app",
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.6.0/dist/vue-router.js"></script>

<script id="card-template" type="text/x-custom-template">
  <div class="modal">
    <div class="modal-content">Card {{$route.params.id}}
    <a href="#/">Close</a>
    </div>
  </div>
</script>


<div id="app">
  <a href="#/card/1" class="card">Card 1</a>
  <a href="#/card/2" class="card">Card 2</a>
  <router-view>To be replaced</router-view>
</div>


<style>
.card {
  display: block;
  margin-bottom: 5px;
  width: 100px;
  padding: 10px;
  border: gray 1px solid;
  border-radius: 5px;
}

.modal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
</style>

Str.s. W tym przykładzie używam adresów URL Hashbang, który wskazuje użycie # na ścieżce, ale można również sprawić, że działa również ze standardowymi adresami URL.

1
damienix 24 czerwiec 2017, 21:20

Najbardziej simpherest sposobem na osiągnięcie tego jest najpierw ustawienie popup tła kontenera zaraz po tagu <body>

div.popup-bg {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  z-index: 9000;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
}

Wewnątrz tego elementu możesz utworzyć okno popup

div.popup-element {
  width: 50%;
  height: auto;
  margin: 4em auto;
  padding: 1em;
  background-color: #ffffff;
  display: block;
}

Użyj zgodnie z następującymi:

<div class="popup-bg">
  <div class="popup-element">
    <h2>My settings popup<h2>
    <p>Bla bla bla</p>
  </div>
</div>

Aby wyświetlić element, który wywołujesz zdarzenie OnClick z domem słuchacza, aby zmienić div.popup-bg do display: block;

<a href="#" onclick="document.getElementById('popup-bg').style.display = 'block';">Open popup</a>
0
Rick 24 czerwiec 2017, 17:53

To, co chcesz zbudować, to pojedyncza aplikacja lub spa.

Normalna aplikacja internetowa działa tak:

  1. Klient dokonuje żądania serwera.
  2. Serwer zwraca stronę powiązaną z tym adresem URL.
  3. Klient sprawia stronę.
  4. Użytkownik współdziała z stroną, prawdopodobnie nawigującą na inną stronę i począwszy od 1.

W spa przepływ pracy jest różny. Serwer zwraca stronę, która zawiera całą logikę dla aplikacji (lub przynajmniej całą logikę, aby poderwać więcej logiki w razie potrzeby). Po przejściu do innego adresu URL, zamiast wysyłać żądanie do serwera, spa zdecyduje, co robić na tym nowym adresie URL (renderować nową stronę, otworzyć modalne itp.).

Ramy budowy Spa obejmują AngularJs, kątowe (aka kątowe2 lub kąty4) i reaguje.

W szczególności, jeśli wybierzesz kanciasty. Możesz użyć To, aby wyświetlić modalny na adres URL.

0
jspurim 24 czerwiec 2017, 17:56