Question

我需要在网站上放一个弹出窗口，告诉用户该网站有新版本。

我已经创建了一个可以单击的Bootstrap模式，但是使用jQuery，一旦页面加载后它可以在几秒后出现吗？一旦关闭不再出现？

请参阅下面的代码和jsfiddle

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"><img src="https://dcnetworks.ie/wp/wp-content/uploads/2017/11/placeholder-logo-2-300x167.png" style="width: 300px;"/></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size: 35px;">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h2>Lorem lorem lorem <br />
                   Ipum ipsum</h2>
            </div>
            <div class="modal-footer popup-buttons-wrap">
                <button type="button" class="btn visit-button"><h3>Visit Site</h3></button>
                <button type="button" class="btn close-button" data-dismiss="modal"><h3>Close</h3></button>
            </div>
        </div>
    </div>

.modal-title{
    text-align: center;
}
.modal-content{
    background-color: #063242;
    height: 500px;
    width: 750px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.modal-body{
    text-align: center;
    color: #fff;
    display: flex;
    justify-content: center;
}
.modal-body h2{
    width: 60%;
    border-left: 3px solid #E52149;
    border-right: 3px solid #ADD13D;
    font-weight: 400;
}
.modal-header{
    border-bottom: 0;
}
.modal-footer{
    border-top: 0;
    text-align: center;
}
.modal-header .close{
    color: #fff;
    position: absolute;
    top: 25px;
    right: 25px;
}
.visit-button{
    border: 3px solid #E52149;
    background-color: transparent;
    margin-right: 55px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.visit-button h3{
    margin: 0;
    color: #fff;
    font-weight: 400;
    padding: 3px;
}
.visit-button:hover{
    background-color: #E52149;
    color: #fff;
}
.close-button{
    border: 3px solid #ADD13D;
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.close-button h3{
    margin: 0;
    color: #fff;
    font-weight: 400;
    padding: 3px;
}
.close-button:hover{
    background-color: #ADD13D;
    color: #fff;
}

Answer 1

尝试这样做：

if (typeof $.cookie('yourCookie') === 'undefined')
  //Create yourCookie and display your modal
else
  //Go on your website

如何在页面加载时将Bootstrap模式转换为弹出窗口？

1 个答案: