首页 新闻 搜索 专区 学院

怎么用一个变量接收 layer.confirm的bool值

0
悬赏园豆:200 [已关闭问题] 关闭于 2016-12-30 14:43

    $("#btn").on('click',function(){
        layer.confirm('点击什么',{
            btn:['确定','取消']
        },function(index){
                layer.close(index);
                console.log("点击了确定");
        },function(){
                console.log("点击了取消");
        })
    })

_whys的主页 _whys | 初学一级 | 园豆:4
提问于:2016-12-29 17:13
< >
分享
所有回答(2)
0

    $("#btn").on('click',function(){

   var isok=false;
        layer.confirm('点击什么',{
            bth:['确定','取消']
        },function(index){

      isok=true;
                layer.close(index);
                console.log("点击了确定");
        },function(){

                console.log("点击了取消");
        })

    alert(isok);

    })

 

你layer.conform{}后的第一个function是指成功后的回调,第二个则是 no后的回调,直接在这两个回调function里给外面isok变量赋值就行。如有不明白,在继续。

龙行天涯 | 园豆:1840 (小虾三级) | 2016-12-29 18:08

这样的话 只会输出false啊。

支持(0) 反对(0) _whys | 园豆:4 (初学一级) | 2016-12-29 18:54

点击只后还没点确定或者取消,然后就直接输出了isok

支持(0) 反对(0) _whys | 园豆:4 (初学一级) | 2016-12-29 19:15

@WyhStar: 我测试了一下,已经发现了。稍等一下

支持(0) 反对(0) 龙行天涯 | 园豆:1840 (小虾三级) | 2016-12-29 19:41

@程序人生,永无止境: 是点了确定才会赋值 我能发现的只有这么多了 对了 那个是btn不是bth打错了 不好意思

支持(0) 反对(0) _whys | 园豆:4 (初学一级) | 2016-12-29 19:43

@WyhStar: 

在function内部赋值后alert确实是成功的,只是在外面就不行。我再试试

支持(0) 反对(0) 龙行天涯 | 园豆:1840 (小虾三级) | 2016-12-29 19:49

我刚刚看了一下官方文档,也搜索一下相关问题,网上也有网友有过这样的疑问。layer里面的confirm方法不像js自带的confirm那样先要判断true或false才能执行下一步,layer里的confirm是非阻塞式的,意思是它不会等你执行完了yes或no回调函数的代码以后再去执行外部的js代码,而是已经先执行了layer.confirm()外部的代码。

            $("#btn").click(function () {
                var isok = false;
                layer.confirm("是否继续?", {

                }, function () {
                    isok = true;
                    layer.alert("yes");
                }, function () {
                    layer.alert("no");
                })
                alert(isok);
            })

像上面这段代码,按照我们的逻辑,应该是先执行回调函数里的代码,再最后执行alert(isok);这一句代码,但是事实上layer他是非阻塞式的。

所以你只能改变代码写法,将要执行的代码在回调函数中执行。

至少目前来说,好像还没发现什么办法可以让它成为阻塞式的执行代码。

支持(0) 反对(0) 龙行天涯 | 园豆:1840 (小虾三级) | 2016-12-29 20:08

@程序人生,永无止境: 嗯 昨天自定义写了一个弹框,但是遇到的问题是一样的。isok是点击之前就赋值了,封装成一个方法也不行 但是老板非要一个变量可以接收true或false 很头疼 

$("#btn1").click(function(){
        var boo =isok();
        console.log(boo);
    })

    function isok(){
        var isokorno;
        $(".big-box").css("display","block");
        $(".ok").click(function(){
            isokorno =true;
            $(".big-box").css("display","none");
        })
        $(".close").click(function(){
            isokorno =false;
            $(".big-box").css("display","none");
        })
        return isokorno;
    }

 

一直输出的是undefined 还有其他的办法吗

支持(0) 反对(0) _whys | 园豆:4 (初学一级) | 2016-12-30 09:37

@WyhStar: 

既然别人家框架layer实现不了你想要的结果,又不能用原生js中的comfirn,你老板又非要这样,那可以自己写一个弹出层。

我这里只是写了一个div,用于模拟弹出层,这个div的显示或隐藏用于模拟弹出层中点击了yes或no后的效果,如果是no,则隐藏,表示弹出层消失,如果是yes,则继续显示,当然你也可以把它隐藏。同时在我的yes或no的点击事件中已经给外部变量isok赋值,并且这样赋值能够成功。最后再点击一次弹出按钮,就能够得到isok真正的值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../../Scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            var isok = false;
            $("#btn").click(function () {
                $("#div-layer").show();
                $("input[class='yes']").click(function () {
                    isok = true;
                })
                $("input[class='no']").click(function () {
                    isok = false;
                    $("#div-layer").hide();
                })
                alert(isok);
            })
        })
    </script>
</head>
<body>
    <div style="width: 100%; height: auto; margin: auto;">
        <input type="button" id="btn" value="点击弹窗" />
        <div id="div-layer" style="width: 400px; height: 270px; border: 1px solid gray; background-color: #cbccce; display: none;">
            <input type="button" class="yes" value="确认" />
            <input type="button" class="no" value="取消" />
        </div>
    </div>
</body>
</html>

从逻辑上来说,只能到这一步了。

至于弹出层的效果和样式,只要把这个逻辑做通,样式问题都是可以去调整的。想把这个div的显示隐藏做成弹出层的形式,就是你样式的问题了。

最后就总结一句:别人框架无法实现的,而你又一定需要的,并且是合理的可实现的,那么就自己去写。自己的东西想怎么玩就怎么玩,只要不违背规律。

支持(0) 反对(0) 龙行天涯 | 园豆:1840 (小虾三级) | 2016-12-30 14:05

@程序人生,永无止境: 谢谢你

支持(0) 反对(0) _whys | 园豆:4 (初学一级) | 2016-12-30 14:14
0

试试这个,其实不非要用jquery/zepto

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt;
    var r = confirm("Press a button!");
    if (r == true) {
        txt = "You pressed OK!";
    } else {
        txt = "You pressed Cancel!";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>
View Code

 

CaiYongji | 园豆:1267 (小虾三级) | 2016-12-30 10:02

@CaiYongji 谢谢你的建议 其实意思是想要个自定义的弹出框 所以不能使用confirm  浏览器自带的弹出框是可以阻止的  阻止了就出不来了 除非刷新 

支持(0) 反对(0) _whys | 园豆:4 (初学一级) | 2016-12-30 11:20

@WyhStar: 其实这种标准是顺应浏览器协议设计的,如果那么做是反设计的我个人是不推荐的。

自定义弹出框可以用dialog

支持(0) 反对(0) CaiYongji | 园豆:1267 (小虾三级) | 2016-12-30 12:53

@CaiYongji: 这个标签 很多浏览器不支持的吧   我在用promise做 感觉有点眉目吧

支持(0) 反对(0) _whys | 园豆:4 (初学一级) | 2016-12-30 12:59

@WyhStar: 

$('<div></div>').appendTo('body')
  .html('<div><h6>Yes or No?</h6></div>')
  .dialog({
      modal: true, title: 'message', zIndex: 10000, autoOpen: true,
      width: 'auto', resizable: false,
      buttons: {
          Yes: function () {
              doFunctionForYes();
              $(this).dialog("close");
          },
          No: function () {
              doFunctionForNo();
              $(this).dialog("close");
          }
      },
      close: function (event, ui) {
          $(this).remove();
      }
});

用这个拓展下思路。

支持(0) 反对(0) CaiYongji | 园豆:1267 (小虾三级) | 2016-12-30 13:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册