使用模式引导程序进行确认将无法正常工作

打电话

我正在使用引导程序,并希望使用带有按钮的模式启动来确认用户删除操作。但是引导程序的示例代码似乎对我不起作用。因此,我从论坛上查找了一些示例,但仍然无法正常工作。我尝试过的一个例子就是从这里开始的已经两个小时了,我仍然不知道我的代码有什么问题。“确认”按钮将不起作用,因此每当我单击“确认”按钮时,它都不会执行任何操作。当我将鼠标光标移到btn-ok上时,在浏览器中没有看到链接概述。

这是我的代码:

<button class="btn btn-default" data-href="delete.php?id=54" data-toggle="modal" data-target="#confirm">Delete</button>

<div class="modal fade" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            ...
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a class="btn btn-danger btn-ok">Delete</a>
        </div>
    </div>
</div>

初级

试试这个小提琴

https://jsfiddle.net/gildonei/pho9zp2f/9/

HTML代码

<a class="btn btn-default btn-delete" href="delete.php?id=54">Delete</a>
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">...</div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
                <a id="bt-modal-cancel" href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> 
                <a id="bt-modal-confirm" class="btn btn-danger btn-ok">Delete</a>

            </div>
        </div>
    </div>
</div>

JavaScript代码

$(function(){
    var $myModal = jQuery('#my-modal');

    // Modal to delete record
    var $btDelete = jQuery('.btn-delete');
    if ($btDelete.length) {
        $btDelete.click(function(e){
            e.preventDefault();

            var url = jQuery(this).attr('href');
            var id = url.replace(/[^0-9]/g, '');

            // Objects from alert modal
            var $dsBody = $myModal.find('div.modal-body');
            var $dsTitle = $myModal.find('div.modal-header h3');
            var $btConfirm = jQuery('#bt-modal-confirm');
            var $btCancel = jQuery('#bt-modal-cancel');

            $dsBody.html('<p>Are you sure you want to delete the record #' + id + '?</p>');
            $dsTitle.html('Delete Record');

            $myModal.modal({
                show: true
            });


            $btConfirm.attr('href', url).removeAttr('data-dismiss');
            $btCancel.click(function(){
                $dsTitle.html('Warning');
                $dsBody.html('<p>Notice</p>');
                $btConfirm.attr('href', '#').attr('data-dismiss', 'modal');
            });
        });
    }

});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导模式弹出窗口无法正常工作

来自分类Dev

使用引导程序的jquery验证错误消息无法正常工作

来自分类Dev

引导程序内的按钮无法正常工作

来自分类Dev

如何在引导程序模式框中使用引导程序确认?

来自分类Dev

如何在引导程序模式框中使用引导程序确认?

来自分类Dev

使用Ember CLI的Ember引导程序;无法使Popovers组件正常工作

来自分类Dev

MVC FormAction引导程序模式确认

来自分类Dev

Twitter引导程序偏移量无法正常工作

来自分类Dev

引导程序:进度栏加载无法正常工作

来自分类Dev

引导程序无法与流星一起正常工作

来自分类Dev

HTML /引导程序。顶部填充无法正常工作

来自分类Dev

引导程序无法在 Visual Studio 2017 中正常工作

来自分类Dev

提交表单时无法使用模式窗口进行确认

来自分类Dev

引导隐藏无法正常工作

来自分类Dev

引导列无法正常工作

来自分类Dev

AngularJS密码确认noMatch无法正常工作?

来自分类Dev

Ruby on Rails:密码确认无法正常工作

来自分类Dev

带有确认的Socketclustser无法正常工作

来自分类Dev

确认订单按钮无法正常工作

来自分类Dev

jQuery确认(href)无法正常工作

来自分类Dev

确认对话框无法正常工作

来自分类Dev

引导轮播无法正常工作:堆叠图片(使用导轨)

来自分类Dev

在codeigniter中使用引导程序模式进行更新

来自分类Dev

无法调用引导程序模式

来自分类Dev

无法打开模式引导程序

来自分类Dev

缩略图行在Chrome中工作正常,但在Firefox中无法正常运行(引导程序)

来自分类Dev

记忆模式无法正常工作

来自分类Dev

EventEmitter无法使用引导程序模式解析正确的参数

来自分类Dev

引导程序无法在本地工作

Related 相关文章

热门标签

归档