---
title: "custom checkbox not working with model popup?"  
description: "custom checkbox not working with model popup?"  
author: "Anonymous User"  
published: 2013-03-01  
updated: 2013-03-02  
canonical: https://www.mindstick.com/forum/614/custom-checkbox-not-working-with-model-popup  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# custom checkbox not working with model popup?

Hi Guys

I have created [custom checkbox](https://www.mindstick.com/blog/455/custom-checkbox-using-css) in [asp.net mvc](https://www.mindstick.com/forum/155798/what-is-caching-in-asp-dot-net-mvc) 4 [project](https://www.mindstick.com/articles/105927/how-to-excel-at-managing-multiple-projects), that [working fine](https://answers.mindstick.com/qa/95550/why-is-the-safari-browser-not-working-fine), but when custom checkbox used on [model popup](https://www.mindstick.com/forum/34333/how-i-can-call-a-model-popup-with-data-by-using-jquery-in-mvc) [window](https://www.mindstick.com/forum/161285/how-does-the-window-console-object-work-in-javascript), that not work. please help me!

**Custom checkbox css as below**

```
.ckbox{ width: 25px; height: 25px;}.custom-checkbox{ position: relative; display: inline-block;}.custom-checkbox > .box{ position: relative; display: block; width: 25px; height: 25px; background-color: #FFF; padding: 0px; margin: 0px;}.custom-checkbox > .box > .tick{ position: absolute; left: 4px; top: 7px; width: 14px; height: 6px; border-bottom: 4px solid #000; border-left: 4px solid #000; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); display: none;}.custom-checkbox > input:checked + .box > .tick{ display: block;}.custom-checkbox > input{ position: absolute; outline: none; left: 0; top: 0; padding: 0; width: 25px; height: 25px; border: none; margin: 0; opacity: 0; z-index: 1;}
```

## custome checkbox code

```
<table><tr>            <td class="td_user">                <span class="custom-checkbox">                    <input type="checkbox" id="chkPermissionIsUsers@(Model.UserID)" name="chkPermissionIsUsers@(Model.UserID)" class="ckbox"                                    checked="@(pages != null && pages.Count(m => m.PageID == 1) > 0)" onclick = "onPermissionChanged(@Model.UserID,'Users', this.checked)"/>                    <span class="box"><span class="tick"></span></span></span>                <label class="lblFontStyle" for="chkPermissionIsUsers@(Model.UserID)" style="vertical-align: super;">                    Users                </label>            </td></table>
```

\
Model popup

Model popup code used by below URL

[https://www.mindstick.com/Articles/1117/crud-operation-using-modal-dialog-in-asp-dot-net-mvc](https://www.mindstick.com/Articles/1117/crud-operation-using-modal-dialog-in-asp-dot-net-mvc)\

\

## Thanks

\

## Replies

### Reply by AVADHESH PATEL

Hi Pravesh!

Changed custom checkbox z-index 1 to 99999 or replace custom-checkbox > input class from below class

.custom-checkbox > input\
{\
position: absolute;\
outline: none;\
left: 0;\
top: 0;\
padding: 0;\
width: 25px;\
height: 25px;\
border: none;\
margin: 0;\
opacity: 0;\
z-index: 99999;\
}

I hope it resolve your problem


---

Original Source: https://www.mindstick.com/forum/614/custom-checkbox-not-working-with-model-popup

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.