独自のURLでポップアップページを作成する

debugcn 投稿 Dev

nck001

メニュー項目をクリックすると開く、いくつかのページを含むアプリケーションを開発しています。ポップアップページのように開きますが、独自のURLが必要であり、別のページです。Trelloのカードがポップアップとして開く方法と似ていますが、独自のURLもあります。

どうすればそれを行うことができ、このようなものの背後にある技術について知る必要がありますか？

以下に添付されているTrelloのカードポップアップ画像。

trelloのカードリンクをクリックする前に

trelloカードが独自のURLでポップアップとして開きます

ダミエニックス

vue-routerを使用するだけです。カードはいくつかのサブルートに表示され、「ボード」またはホームページがルートページになります。

ここでGETだVUE-ルータのために始めた、と以下の作業のコードは：

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/[email protected]/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>

PSこの例では、パスに＃を使用することを示すハッシュバンURLを使用していますが、標準のURLでも機能させることができます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]