Question

我的网站包含这个简单的菜单，关于我和联系方式。它是单页网站，我希望用户在访问我的页面时很容易，用户可以向下滚动页面查看联系人或关于我等，或者用户只需单击关于我或联系人，窗口就会弹出并显示只关于我或联系[在bootstrap中使用模态]，我能够做到这一点，但包含模态的所有事件都隐藏在我的页面上，如何在页面上显示包含模态的内容？

以下是带模态的简单联系页面代码。

 <!-- 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>

Answer 1

将有害生物代码复制到单个文件中并检查您的本地文件是否会运行。完善。以下是现代的做法。您可以参考this link获取有关动态创建模态的方式的更多详细信息。

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>

Modal Bootstrap可见

1 个答案: