刪除確認彈出框

點擊刪除時,爲了避免無意識誤刪,需要對刪除進行再次確認。
可使用瀏覽器自帶的彈出框:

            $('.remove').click(function(){
                $that=$(this);
                if(!confirm("確認刪除?")){ 
                    window.event.returnValue = false; 

                }else{
                    $that.parent("ul").remove();
                    //發送ajax請求刪除數據
                }

            })

在某些情況下,需要對彈出框做一些指定樣式。

            .layer{
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: 0.8;
                text-align: center;
                padding-top: 50%;
                color: white;
                display: none;
                cursor: pointer;
            }

HTML 部分

<a  class='remove'>刪除1</a> 
<a  class='remove'>刪除2</a> 
<a  class='remove'>刪除3</a> 
<a  class='remove'>刪除4</a> 
<a  class='remove'>刪除5</a> 
<a  class='remove'>刪除6</a> 
<div id="layer" class="layer">
    確認刪除?
    <a id='true'>確認</a>
    <a id='false'>取消</a>
</div>
         $('#true,#false').click(function(){
            if(this.id=='true'){
                $('.isRemove').remove();
                //發送ajax請求刪除數據
            }else{
                $('.isRemove').removeClass('isRemove');
            }
            $('.layer').css('display','none');
        });
        $('.remove').click(function(){
            $('.layer').css('display','block');
            $(this).addClass(' isRemove');
        });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章