Modal Bootstrap visible

My website contains this simple menu home, about me and contact. It's single page website, I want to make it easy for user's when visiting my page, user can scroll down the page to check the contact or about me etc or user can just simply click About me or Contact and the window will pop up and show only About me or Contact [using modals in bootstrap], I am able to do that ,but all things event containing modals are hidden on my page , how can I make those things containing modals visible on my page ?

Here is simple contact page codes with modals.

 <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav" id="nav">
            <li>
              <a href="#">Home
              </a>
            </li>
            <li>
              <a href="#abt_modal" data-toggle="modal" data-target="#abt_modal">About me
              </a>
            </li>

            <li>
              <a href="#modal1" data-toggle="modal" data-target="#myModal"> Contact 
              </a>
            </li>
            <li>
         

          </ul>
        </div>

<div id="myModal" class="modal" role="dialog">
      <div class="modal-dialog">
    <footer class="f7" id="modal1">
    
     <button type="button" class="btn btn-default" data-dismiss="modal" id="close1">Close</button>
      
    <div class="container-fluid">
    
    
    <div class="row" id="ft">
    <div class="ft">
    <h3> SAY HELLO </h3>
    <span>get in touch</span>
    </div>
    
    
    <div class="col-md-4 a">
    <p>
    <i class="fa fa-mobile-phone fa-5x"></i> <br><br>
    <span> Call us at </span><br>
    <span> +467i7292518347</span><br>
    </p>
    </div>
    
    
    <div class="col-md-4 a" >
    <p>
    <i class="fa fa-map-marker fa-5x"></i> <br><br>
    <span> Ul.Zagórze 27A </span> <br>
    <span>05-098  Sadowata,<br> Poland </span>
    </p>
    </div>
    
    <div class="col-md-4 a">
    <p>
    <i class="fa fa-envelope fa-5x"></i><br><br>
    <span> Email us at</span> <br>
    <span>Hotbong20376gównoJebanye@gmail.com</span><br>
    </p>
    </div>
    
    </div>
    
    </div>
    </footer>
    </div>
    </div>

Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.

function openModalDynamic() {
  var message = $('#content-div');
  BootstrapDialog.show({
    title: 'Default Title',
    message: $('#content-div'),
    buttons: [{
      label: 'Close',
      action: function(dialog) {
        dialog.close();
      }
    }],
    onhide: function(dialog) {
      $('#content-container').append(message);
    }
  });
};

function openModalDynamic2() {
  BootstrapDialog.show({
    title: 'Default Title',
    message: $('#content-div').clone(true),
    buttons: [{
      label: 'Close',
      action: function(dialog) {
        dialog.close();
      }
    }],
    onhide: function(dialog) {}
  });
}

<!DOCTYPE html>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<button type="button" onclick="openModalDynamic()">Type 1</button>
<button type="button" onclick="openModalDynamic2()">Type 2</button>
<br> Type 1 : This code will cut the div from original location and put it into your modal.<br> Type 2 : This code will copy the div from original location and put it into your modal. So you will see same div at both the place.<br> This will work great
until and unless you have any activity depending upon id's of elements.
<div style="height : 250px">
</div>

<div id="content-container">
  <div id="content-div">
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">Panel with panel-default class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-primary">
        <div class="panel-heading">Panel with panel-primary class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-success">
        <div class="panel-heading">Panel with panel-success class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-info">
        <div class="panel-heading">Panel with panel-info class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-warning">
        <div class="panel-heading">Panel with panel-warning class</div>
        <div class="panel-body">Panel Content</div>
      </div>

      <div class="panel panel-danger">
        <div class="panel-heading">Panel with panel-danger class</div>
        <div class="panel-body">Panel Content</div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          About US will go here.
        </div>
        <div class="col-sm-6">
          Contact US will go here.
        </div>
      </div>
    </div>
  </div>
</div>