bootstrap modal&ajax測試背景是否回到頂端

1.為了測試在modal中ajax是否會影響背景資料(回到頁首)而製成的範例 2.結論:如果使用<a>，會回到上層。故建議採用<span>並調整其css偽裝成hyperlink

by cactus77kiki

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <!--<h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>-->
  <h2>Data:</h2>
  <ol>
    <li v-for="(row,index) in arryVal">
      <!--<span class="glyphicon glyphicon-pushpin"></span>-->
      <button v-on:click="openSingle(row.id)" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-search"></span> Detail</button>
      {{row.id}} - {{row.title}}
    </li>
  </ol>
  <div id="div_detail" class="modal" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" v-on:click="closeModal">&times;</button>
      </div>
      <div class="modal-body">
      <div style="text-align:center;">
        <button v-on:click="getsingle(singleVal.id-1)">
          Back<span class="glyphicon glyphicon-arrow-left"></span>
        </button>
        
        <!--<span class="spanlink"...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

    span.spanlink{
         cursor:pointer;         
         text-decoration: none;
    color: black;
    }
    span.spanlink:hover{
         color: #cc0000;
    }

JavaScript

new Vue({
  el: "#app",
  data: {
  	arryVal:[],
    singleVal:[],
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  created: function(){
  	this.getall();
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    closeModal: function(){
    	$('#div_detail').modal('hide');
    },
    openSingle: function(index){
    	this.getsingle(index);  
      $('#div_detail').modal('show');
    },
    getall: function(){
      var serviceURL = 'https://jsonplaceholder.typicode.com/posts';
      var self = this;
      axios.get(serviceURL).then(function (Result) {
      	if (Result.data) {        	
        	self.arryVal = Result.data;
        } else {
					alert('read error');
				}
			}).catch(function (error) {
        alert(error);
      });
    },
    getsingle: function(index){
    	var serviceURL = 'https://jsonplaceholder.typicode.com/posts';
      var self = this;
      axios.get(serviceURL)
      .then(function (Result) {
      	if (Result.data) {
        	var data = Result.data;   
          var findone = jQuery.grep(data, function (item) {
                            return item.id == index;
                        });             
        	self.singleVal = findone[0];           
        } else {
					alert('read error');
				}
			}).catch(function (error) {
        alert(error);
      });
    }
  }
})