第一个问题在这里!
基本上我使用Bootstrap,尝试使用按钮链接到页面上的另一个元素。我在一个按钮上使用它并且它可以工作,但是我使用Google Maps InfoWindow来创建一个不起作用的新按钮。我不知道区别是什么(除了使用JQuery在地图上添加一个,但这个也改变了页面的URL!)
编辑:InfoWindow上的按钮正确显示所有内容。
这是代码!
JQUERY
var contentString = '<a class="portfolio-item d-block mx-auto" href="#create-report">\n' +
' <button type="button" class="btn btn-primary btn-xl">\n' +
' Reportar ocorrência\n' +
' </button>\n' +
' </a>';
var latLng = e.latLng;
if(infowindow != null)
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
position: latLng
});
HTML
<div class="portfolio-modal mfp-hide" id="create-report">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-secondary text-uppercase mb-0">Reportar Ocorrência</h2>
<hr class="star-dark mb-5">
<form name="newReport" id="reportForm" novalidate="novalidate">
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Nome da Ocorrência</label>
<input class="form-control" id="reportName" type="text" placeholder="Nome da Ocorrência*" required="required"
data-validation-required-message="Insira o nome da ocorrência.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Localização</label>
<input class="form-control" id="reportAddress" type="text"
placeholder="Localização (morada, por exemplo)*" required="required"
data-validation-required-message="Insira a localização da ocorrência.">
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls mb-0 pb-2">
<label>Descrição</label>
<input class="form-control" id="reportDescription" type="text" placeholder="Descrição*"
required="required" data-validation-required-message="Insira a descrição da ocorrência.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="successReport"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-xl" id="reportBtn">Reportar</button>
</div>
</form>
<br>
<a id="closeFormBtn" class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
<i class="fa fa-close"></i>Fechar
</a>
</div>
</div>
</div>
</div>
CSS
.portfolio {
margin-bottom: -15px;
}
.portfolio .portfolio-item {
position: relative;
display: block;
max-width: 25rem;
margin-bottom: 15px;
}
.portfolio .portfolio-item .portfolio-item-caption {
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
opacity: 0;
background-color: rgba(175, 49, 16, 0.8);
}
.portfolio .portfolio-item .portfolio-item-caption:hover {
opacity: 1;
}
.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content {
font-size: 1.5rem;
}
@media (min-width: 576px) {
.portfolio {
margin-bottom: -30px;
}
.portfolio .portfolio-item {
margin-bottom: 30px;
}
}
.portfolio-modal .portfolio-modal-dialog {
padding: 3rem 1rem;
height: calc(100vh - 6rem);
min-height: 850px;
margin: 1rem calc(1rem - 8px);
position: relative;
z-index: 2;
-moz-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
}
.portfolio-modal .portfolio-modal-dialog .close-button {
position: absolute;
top: 2rem;
right: 2rem;
}
.portfolio-modal .portfolio-modal-dialog .close-button i {
line-height: 38px;
}
.portfolio-modal .portfolio-modal-dialog h2 {
font-size: 2rem;
}
@media (min-width: 768px) {
.portfolio-modal .portfolio-modal-dialog {
height: calc(100vh - 6rem);
min-height: 850px;
padding: 5rem;
margin: 3rem calc(3rem - 8px);
}
.portfolio-modal .portfolio-modal-dialog h2 {
font-size: 3rem;
}
}
答案 0 :(得分:0)
所以不要 '\ n'+'\ n'+'报告ocorrência\ n'+'\ n'
您需要将该样式用于模态按钮触发器
<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
那就是modl的div
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">