我的网站上有一些方形div,用于显示文字和大图标。
当用户点击div时,我想要一个模态,但由于图标是一个对象,当用户点击div(只是div,而不是图标)时,模态会显示。当他们点击图标时,点击事件不会触发。
这是我的JS
(function($) {
$('.cbp-ig-grid li').on('click', 'li', function(){
var courseSelected = $(this).find('span').attr('class').split(' ')[1];
var bodyContent = $('.full_body_content');
bodyContent.addClass('BluredBackground');
bodyContent.before("<div class='selectExamStage'><p>Porfavor escoge que parte del curso deseas practicar</p><div class='ExercisesPartDiv ExercisesPart_1'></div><div class='ExercisesPartDiv ExercisesPart_2'></div><div class='ExercisesPartDiv ExercisesPart_3'></div></div>").slideDown('slow');
bodyContent.before('<div class="blockDiv"></div>');
$('.blockDiv').on('click',function(){
$('.full_body_content').removeClass('BluredBackground');
$('.selectExamStage').hide('slow', function(){ this.remove(); });
$(this).hide('slow', function(){ this.remove(); });
})
})
})(jQuery);
HTML
<ul class='cbp-ig-grid'>
<li>
<a>
<span class='cbp-ig-icon cbp-ig-icon-algebra'>
<object type='image/svg+xml' data='" . plugin_dir_url( __FILE__ ) ."/images/Algebra_negro.svg'></object>
</span>
<h3 class='cbp-ig-title'>Álgebra</h3>
<span class='cbp-ig-category'>Ciencias y Letras</span>
</a>
</li>
<li>
<a>
<span class='cbp-ig-icon cbp-ig-icon-aritmetica'>
<object type='image/svg+xml' data='" . plugin_dir_url( __FILE__ ) ."/images/Aritmetica_negro.svg'></object>
</span>
<h3 class='cbp-ig-title'>Aritmética</h3>
<span class='cbp-ig-category'>Ciencias y Letras</span>
</a>
</li>
<li>
<a>
<span class='cbp-ig-icon cbp-ig-icon-geometria'>
<object type='image/svg+xml' data='" . plugin_dir_url( __FILE__ ) ."/images/Geometria_negro.svg'></object>
</span>
<h3 class='cbp-ig-title'>Geometría</h3>
<span class='cbp-ig-category'>Ciencias y Letras</span>
</a>
</li>
<li>
...
...
和CSS
.cbp-ig-grid {
list-style: none;
padding: 0;
margin: 0;
}
.cbp-ig-grid li {
width: 25%;
float: left;
height: 420px;
text-align: center;
border-top: 0px solid #ddd;
}
/* we are using a combination of borders and box shadows to control the grid lines */
.cbp-ig-grid li:nth-child(-n+3){
border-top: none;
}
/* anchor style */
.cbp-ig-grid li > a {
display: block;
height: 100%;
color: #47a3da;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
transition: background 0.2s;
}
/* the icon with pseudo class for icon font */
.cbp-ig-icon {
width: 180px;
height: 260px;
margin: 0 auto;
padding: 0;
display: block;
-webkit-transition: -webkit-transform 0.2s;
transition: -moz-transform 0.2s;
transition: transform 0.2s;
}
.cbp-ig-icon:before {
font-family: 'besticon';
font-size: 14em;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
希望有人能帮助我这个
答案 0 :(得分:3)
尝试将此添加到您的css文件
object{
pointer-events: none;
}
或者您可以使用<img>
代码而不是<object>
。