为什么单击图标时模式无法启动？

Question

我一直在尝试各种方法来激活模态，从javascript到直接调用模态都没有成功。页面所做的只是允许单击，然后什么都不做。

我尝试从javascript文件调用mod，我尝试直接从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">&times;</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;
}

结果应该是内容的弹出模式。

Answer 1

首先，我将模态主体移到标签外，并给它一个id，profileModal。接下来，我知道它奏效了。

Answer 2

如果您不打算使用 jquery，请使用文档 API 访问 HTMLElement 节点，然后操作其上的样式属性。

var modal = document.getElementById('profileModal');
modal.style.display = 'block';

由于我不知道您的CSS的确切性质，因此很难给出更准确的答案。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementByIdhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style