Question

我一直试图让定制模式显示点击＆＃34;关于＆＃34;，但它根本没有发生，我真的不知道为什么，任何人都知道？我把我的完整网站，包括CSS，因为我根本不知道什么是兼容的，以及与bootstrap模式不兼容的东西。

＆＃13;

/* 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;
}

＆＃13;

<!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">&times;</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;

Answer 1

你真的需要阅读模态手册。最简单的方法是为<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

莫代尔不会表现出来

1 个答案: