我一直试图让定制模式显示点击"关于",但它根本没有发生,我真的不知道为什么,任何人都知道?我把我的完整网站,包括CSS,因为我根本不知道什么是兼容的,以及与bootstrap模式不兼容的东西。
/* CSS Document */
body {
background:url(default-bg.jpg) no-repeat center center fixed;
width:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main {
width:100%;
margin:0 auto;
}
#logo {
margin: 0 auto;
width:130px;
height:130px;
}
.logo {
margin:0 auto;
text-align:center;
width:130px;
height:130px;
}
#abovenavigation {
margin:0 auto;
}
#container {
margin:0 auto;
text-align:center;
list-style:none;
font-size:0;
width:100%;
}
li {
margin:0 20px;
font-size:18px;
display:inline-block;
}
ul {
width:100%;
text-align: center;
list-style:none;
}
h1 {
margin:0 50px;
display: inline-block;
color:#FFF;
font-family:"cooper Std Black";
}
h1:hover {
color:rgba(1,130,255,1);
background-color:#FFF;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
}
.Home {
color:rgba(1,130,255,1);
background-color:#FFF;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
}
.facebook:hover {
background-color:#FFF;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
}
.twitter:hover {
background-color:#FFF;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
}
.mailto:hover {
background-color:#FFF;
border-radius:10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
}
#before {
position:absolute;
width:100%;
height:100%;
font:"cooper Std Black";
}
#before:target {
display:none;
}
#me {
width:300px;
margin:0 auto;
}
#search {
text-align:left;
width:50px;
height:50px;
margin-top:-300px;
background-color:#FFF;
border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
-webkit-border-radius: 0px 10px 10px 0px;
border: 0px solid #000000;
}
#search:hover {
margin-top:-580px;
height:80%;
width:200px;
background-color:#FFF;
position:absolute;
}
#search:hover img {
display:none;
}
#search:active {
height:80%;
width:200px;
background-color:#FFF;
margin-top:-580px;
position:absolute;
}
#search:active img {
display:none;
}
#undernavigation {
margin:0 auto;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="icon" href="Senza titolo-1.ico" />
</head>
<body>
<div id="main">
<div id="logo">
<a href="index.html">
<img src="Syrenlogo.png" width="130px" height="130px" />
</a>
</div><!--ends logo-->
<br/>
<br/>
<div id="abovenavigation">
<ul class="container">
<li><a href="index.html"><h1 class="Home">HOME</h1></a></li><!--
--><li><a href="#" data-toggle="modal" data-target="#myModal"><h1 class="About">ABOUT</h1></a></li><!--
--><li><h1 class="Blog">BLOG</h1></li><!--
-->
</ul><!--ends container-->
</div><!--ends upper navigation-->
<br/>
<br/>
<div id="me">
<img src="Gregory1.png" width="300px" height="300px" onclick="this.src='Gregory2.png'" onmouseover="this.src='Gregory2.png'" onmouseout="this.src='Gregory1.png'"/>
</div>
<br/>
<br/>
<div id="undernavigation">
<ul class="container">
<li><a href="https://www.facebook.com/Albus.Severus.Vitanza" target="_blank"><img class="facebook" src="Facebook.png" width="53px" height="50px" onclick="this.src='Facebookhov.png'" onmouseover="this.src='Facebookhov.png'" onmouseout="this.src='Facebook.png'"/></a></li>
<li><a href="https://twitter.com/Promoetheus" target="_blank"><img class="twitter" src="Twitter.png" width="53px" height="50px" onclick="this.src='Twitterhov.png'" onmouseover="this.src='Twitterhov.png'" onmouseout="this.src='Twitter.png'" /></a></li>
<li><a href:"mailto:gaaren03@gmail.com"><img class="mailto" src="Mailto.png" width="53px" height="50px" title="gaaren03@gmail.com" onclick="this.src='Mailtohov.png'" onmouseover="this.src='Mailtohov.png'" onmouseout="this.src='Mailto.png'" /></a></li>
</ul>
</div><!--ends undernavigation-->
</div><!--ends main-->
<div id="search">
<a href="#search"><img class="search" src="Search.png" height="50px" width="50px" /></a>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
你真的需要阅读模态手册。最简单的方法是为<a id="btn-show-modal">
提供一些额外的属性,即data-toggle="modal"
和data-target="#dialog-example"
。接下来,你在模态的结构中缺少几个div:
<div class="modal fade" id="dialog-example">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Hi! Do You Want To Join My Fun English Course? Here's What You Need to Know!</h1>
</div>
<div class="modal-body">
<pre>Cost Per Lesson: 10€; Hours Per Lesson: 1,30h; Days a Week: Monday to Thursday;</pre>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
</div>
</div>
</div>
</div>
注意modal-dialog
和modal-content
;两者都没有从你的标记中丢失并导致奇怪的行为。另外,我不确定modal hide
是什么。有关更多信息,请阅读此处:http://getbootstrap.com/javascript/#modals
现场演示:Bootply