anchor tag всплывает div вместо новой страницы

Question

Мне было интересно, как реализовать всплывающее окно с собственным адресом. В качестве примера можно привести Хранилище Chrome Extensions: https://chrome.google.com/webstore/category/extensions

Если вы нажмете фрагмент на этом сайте, не только контент появится в виде div, но также будет иметь свой собственный адрес. Поэтому, если я копирую адрес и вставляю его в новое окно, он переходит в одно и то же всплывающее окно. Кроме того, если вы нажмете кнопку «Назад» (или назад), она закрывает всплывающий div вместо перехода на предыдущую страницу.

Если нет простого способа реализовать это, я хотел бы знать, какой объект javascript или что-то, что я должен был бы изучить.

Я не уверен, что это правильный S.E. форум, чтобы спросить, но я должен был спросить кого-то.

Answer 1

Вы можете использовать bootstrap modal. Это очень хорошо

здесь код,

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

я не видел ссылку вы говорите, но я думаю, что они взламывать поведение ссылки и вместо переход к щелкнутому URL-адресу показывает его содержимое на всплывающем div. в JQuery вы можете сделать это что-то вроде preventDefault

Answer 3

Если щелкнуть плитку на этом сайте, не только содержание всплывает в виде DIV, но он также будет иметь свой собственный адрес. Поэтому, если я копирую адрес и вставляю его в новое окно, он переходит к тому же всплывающему окну.

Это называется пользовательским интерфейсом без гражданства, который может быть легко достигнут, например, маршрутизатором в угловом или угловом режиме.

Идея состоит в том, что каждое состояние вашего приложения имеет свой собственный адрес. Если, например, ваше приложение имеет объект user затем URL-адрес, чтобы увидеть конкретный пользователь будет

http://example.com/user/12345 

Где +12345 находится userId

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

http://example.com/user/12345/edit 

Ненужные, когда вы дойдете до последнего, ваше приложение всегда будет открыть форму редактирования для пользователя с id=12345

Чтобы лучше понять это, вам необходимо ознакомиться с некоторыми принципами MVC и, возможно, изучить ui-router tutorial в качестве примера реализации