我是初级初级开发人员,对编码还比较陌生。
我被分配了一个创建弹出模式框以替换旧的下拉菜单的任务。
我已经创建了弹出模式框,但是当我将砌体布局放入新的代码段时,它不起作用。
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('input[type=checkbox]').prop('checked', false);
});
var masonary_layout = '';
var offset = 0;
$(document).ready(function() {
$('.ads-section .sectors .options .single-option .sector-print-temp').change(function() {
if ($(this).is(":checked")) {
$('.sector-print').val('1');
} else {
$('.sector-print').val('0');
}
offset = 0;
setOffsetValue();
loadAds();
//$('.load-more').hide();
});
});
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: white
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div class="sectors">
<div style="padding-top:20px" ;>
<a class="btn" href="#ex5">
Sectors <span class="down-arrow"; style="color:blue">
<i class="fa fa-caret-down"></i>
</span>
</div></a>
</div>
</div>
<div id="ex5" ; class="modal" ; style="background-color:black;">
<div class="options" ; style="line-height:1.8; float:left;">
<p> <input type="checkbox" checked="checked" id="group1" class="sector-print-temp">
<label for="group1" class="onlyThese">
<b> Publication </b> </label> </p>
</div>
<div class="your-div">
<p style="font-size:16px; text-transform:uppercase; float:right">
<a href="#" rel="modal:close" ; class="onlyThese" style="color:white"> <b>Apply</b></a>
</p>
</div>
</div>
我只想澄清我做错了什么。