我一直在尝试各种方法来激活模式,从javascript到直接调用模式都没有成功。该页面只需要单击一下,然后什么也不做。
我尝试从javascript文件调用模式, 我尝试直接从div调用它, 我已经尝试了href javascript, 我尝试检查语法或拼写错误, 并且我尝试在div,ancor,图像和按钮标签之间进行交换。
<div class="child flex-child">
<div class="profile-btn">
<div class="profile-bubble-parent" data-target="#profileModal" data-toggle="modal" onclick="openProfileModal();" >
<img class="profile-bubble" src="assets/img/user.ico">
</div>
</div>
<div class="modal fade" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="profileModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="title-pen"> User Profile <span>UI</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="box">
<div class="content">
<div class="user-profile">
<img class="avatar" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTF_erFD1SeUnxEpvFjzBCCDxLvf-wlh9ZuPMqi02qGnyyBtPWdE-3KoH3s" alt="Ash" />
<div class="username">
Will Smith
</div>
<div class="bio">
Senior UI Designer
</div>
<div class="description">
I use to design websites and applications
for the web.
</div>
<ul class="data">
<li>
<span class="entypo-heart"> 127</span>
</li>
<li>
<span class="entypo-eye"> 853</span>
</li>
<li>
<span class="entypo-user"> 311</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
js文件具有:
function openProfileModal(){
setTimeout(function(){
$('#profileModal').modal('show');
}, 230);
}
CSS:
/*===================================================================================
======================================PROFILE========================================*/
.profile-bubble {
height: 55px;
width: 55px;
border-radius: 50%;
}
.title-pen {
color: #333;
font-family: "Coda", sans-serif;
text-align: center;
}
.title-pen span {
color: #55acee;
}
.user-profile {
margin: auto;
width: 25em;
height: 11em;
background: #fff;
border-radius: .3em;
}
.user-profile .username {
margin: auto;
margin-top: -4.40em;
margin-left: 5.80em;
color: #658585;
font-size: 1.53em;
font-family: "Coda", sans-serif;
font-weight: bold;
}
.user-profile .bio {
margin: auto;
display: inline-block;
margin-left: 10.43em;
color: #e76043;
font-size: .87em;
font-family: "varela round", sans-serif;
}
.user-profile > .description {
margin: auto;
margin-top: 1.35em;
margin-right: 4.43em;
width: 14em;
color: #c0c5c5;
font-size: .87em;
font-family: "varela round", sans-serif;
}
.user-profile > img.avatar {
padding: .7em;
margin-left: .3em;
margin-top: .3em;
height: 6.23em;
width: 6.23em;
border-radius: 18em;
}
.user-profile ul.data {
margin: 2em auto;
height: 3.70em;
background: #4eb6b6;
text-align: center;
border-radius: 0 0 .3em .3em;
}
.user-profile li {
margin: 0 auto;
padding: 1.30em;
width: 33.33334%;
display: table-cell;
text-align: center;
}
.user-profile span {
font-family: "varela round", sans-serif;
color: #e3eeee;
white-space: nowrap;
font-size: 1.27em;
font-weight: bold;
}
.user-profile span:hover {
color: #daebea;
}
/*===================================================================================
======================================MODAL========================================*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
结果应为内容的弹出模式。
答案 0 :(得分:1)
首先,我将模态主体移到了标签之外,并为其指定了一个ID,即profileModal。 接下来,我知道它起作用了。
答案 1 :(得分:0)
如果您不想使用jquery,请使用Document API访问HTMLElement节点,然后在其上操纵样式属性。
var modal = document.getElementById('profileModal');
modal.style.display = 'block';
由于我不知道您CSS的确切性质,因此很难给出更准确的答案。
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style