Question

我正在开发包含某些页面的应用程序，在单击菜单项时会打开。即使它看起来像一个弹出页面，它应该有自己的URL，是一个单独的页面。类似于Trello的卡片如弹出一样打开，但也有自己的URL。

我怎么能这样做，需要了解这些东西背后的技术？

Trello的卡片弹出图片附在下面。

trello card open as pop-up with its own URL

Answer 1

只需使用vue-router。您的卡片将显示在某个子路径中，您的“电路板”或主页将成为根页。

以下是获取started for vue-router和以下工作代码：

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>

P.S。在这个例子中，我使用hashbang url表示在路径中使用＃，但你也可以使用标准URL。

Answer 2

您要构建的是单页应用程序或SPA。

正常的网络应用程序的工作原理如下：

客户端向服务器发出请求。
服务器返回与该URL相关联的页面。
客户端呈现页面。
用户与页面交互，可能导航到另一个页面，从1开始。

在SPA中，工作流程不同。服务器返回一个页面，其中包含应用程序的所有逻辑（或至少所有逻辑，以根据需要检索更多逻辑）。当您导航到其他网址时，SPA不会向服务器发送请求，而是会决定如何对此新网址执行操作（渲染新网页，打开模式等）。

构建SPA的Framworks包括AngujarJS，Angular（又名Angular2或Angular4）和ReactJS。

特别是，如果你选择Angular。您可以使用this在网址上显示模式。

Answer 3

实现此目标的最简单方法是首先在<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);
}

在此元素中，您可以创建弹出窗口

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

使用如下：

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

要显示您使用DOM侦听器调用ONCLICK事件的元素，以将div.popup-bg更改为display: block;

<a href="#" onclick="document.getElementById('popup-bg').style.display = 'block';">Open popup</a>

使用自己的URL创建弹出页面

3 个答案: