我在此网站Ultimate Popup Plugin from CodeCanyon上使用Click here来创建登录模式。
代码工作正常，但即使有人在弹出窗口外点击，弹出窗口仍然保留，用户必须输入详细信息并单击回车。
This看起来如何;
我尝试提供一个z-index来保持弹出窗口，但是我被卡住了。
我已经更新了wordpress插件的代码，无论我能找到什么。
这是弹出窗口的CSS和JS：
jQuery(window).load(function(){
if (jQuery.cookie("popupTemporaryCookie13428")) {
// Popup is hiding after showing first time!
jQuery("#ultimate-popup-13428").hide();
} else if (jQuery.cookie("popupLongerCookie13428")) {
var inst = jQuery("#ultimate-popup-13428").remodal();
inst.open();
jQuery("#ultimate-popup-13428").addClass("ultimate-popup-wrapper-activate");
} else {
var inst = jQuery("#ultimate-popup-13428").remodal();
inst.open();
jQuery("#ultimate-popup-13428").addClass("ultimate-popup-wrapper-activate");
}
var expiresAt = new Date();
expiresAt.setTime(expiresAt.getTime() + 1*24*60*60*1000); // Days
jQuery.cookie("popupLongerCookie13428", new Date());
jQuery.cookie("popupTemporaryCookie13428", true, { expires: expiresAt });
});* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
.ultimate-popup-wrapper {
background: #fff none repeat scroll 0 0;
border-top: 8px solid;
padding: 35px;
position: fixed;
text-align: center;
z-index: 9999;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: .4s;
transition: .4s;
visibility: hidden;
max-width: 100%;
}
.ultimate-popup-wrapper-activate {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
.cross-btn-ppm {
font-size: 20px;
font-weight: 700;
position: absolute;
right: 10px;
text-transform: uppercase;
top: 5px;
cursor: pointer;
z-index: 99;
font-family: arial, sans-serif;
}
.ultimate-popup-inner h2,
.entry-content .ultimate-popup-inner h2,
.entry-summary .ultimate-popup-inner h2,
.page-content .ultimate-popup-inner h2,
.comment-content .ultimate-popup-inner h2 {
font-size: 25px;
margin: 0 0 15px;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.ultimate-popup-inner {
font-size: 16px;
}
.ultimate-popup-shortcodes p {
margin-bottom: 15px;
}
.ultimate-popup-shortcodes input[type="text"],
.ultimate-popup-shortcodes input[type="email"] {
border: 1px solid #ddd;
margin-bottom: 10px;
padding: 10px !important;
width: 100% !important;
}
.ultimate-popup-shortcodes {
margin: 30px auto 0;
max-width: 500px;
text-align: left;
}
.ultimate-popup-shortcodes br { display: none }
.ultimate-popup-shortcodes input[type="submit"] {
border: medium none;
border-radius: 7px;
color: #fff;
font-size: 17px;
padding: 15px;
width: 100%;
text-transform: uppercase;
-webkit-transition: .4s;
transition: .4s;
}
.ultimate-popup-shortcodes .gform_wrapper .gform_heading { display: none }
.ultimate-popup-shortcodes .gform_wrapper .gform_footer {
margin: 15px 0 0;
padding: 0;
}
.ultimate-popup-wrapper-hide .lean-overlay,
.ultimate-popup-wrapper-hide .ultimate-popup-wrapper {
display: none !important;
visibility: hidden !important;
}
.ultimate-popup-halfway-scroll-activate .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-2 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-3 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-4 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-8 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-9 .cross-btn-ppm {
right: 0;
top: 0;
z-index: 99;
border-radius: 0;
}
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-2 .cross-btn-ppm { top: -8px }
.ultimate-popup-theme-id-5.ultimate-popup-halfway-scroll-activate .cross-btn-ppm {
background: #333;
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 50%;
top: 20px;
z-index: 9;
}
.ultimate-popup-theme-id-5.ultimate-popup-halfway-scroll-activate .popup-inner-col-thumb { padding-top: 5px }
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-12 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-10 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-6 .cross-btn-ppm {
right: 10px;
top: 5px;
}
.ultimate-popup-theme-id-1 .cross-btn-ppm { right: 10px }
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
.ultimate-popup-wrapper { overflow: auto }
.ultimate-popup-wrapper .pop-inner-column .popup-inner-col-thumb {
float: none;
margin-bottom: 30px;
margin-top: 0;
padding: 0;
width: auto;
}
.ultimate-popup-wrapper .pop-inner-column .popup-inner-col-cont {
float: none;
padding: 25px;
width: auto;
}
.ultimate-popup-automatic-activate .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-2 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-3 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-4 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-8 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-9 .cross-btn-ppm {
right: 0;
top: 0;
z-index: 99;
border-radius: 0;
}
}<div class="remodal" data-remodal-id="modal"
data-remodal-options="hashTracking: false, closeOnOutsideClick: false">
<form method="post">
<div class="form-group">
<label for="email">Login</label>
<input type="text" class="form-control" required name="email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" required id="pwd" name="pwd">
</div>
<button type="submit" class="btn btn-default">Enter</button>
</form>
</div>