我的网站包含这个简单的菜单,关于我和联系方式。 它是单页网站,我希望用户在访问我的页面时很容易,用户可以向下滚动页面查看联系人或关于我等,或者用户只需单击关于我或联系人,窗口就会弹出并显示只关于我或联系[在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>
答案 0 :(得分: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>