Modal Bootstrap可见 [英] Modal Bootstrap visible
本文介绍了Modal Bootstrap可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的网站包含这个简单的菜单，关于我和联系方式。
它是单页网站，我希望用户在访问我的页面时很容易，用户可以向下滚动页面查看联系人或关于我等等，或者用户只需单击关于我或联系人，窗口将弹出并仅显示关于我或联系[在bootstrap中使用模态]，我能够做到这一点，但包含模态的所有事件都隐藏在我的页面上，如何在页面上显示包含模态的内容？
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>
这篇关于Modal Bootstrap可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
