不使用onlick点击弹窗替代方案达到同样弹窗效果

集源码在一次项目中被禁止使用任何on开头的代码,比如要用到onlick点击事件网页中被禁止使用,没办法只能想办法替换方法了,使用click点击事件替代onlick。以下是项目实例代码,直接可使用。
css、js以及图片文件已经远程链接了你可以另存这些文件到本地。

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="http://www.520ym.net">
        <meta name="description" content="onlick点击弹窗替代方案 Base Template.">
        <meta name="keywords" content="onlick点击弹窗替代方案,Template">
        <title>onlick点击弹窗替代方案</title>

<link rel="stylesheet" href="http://demo.webcss.top/code/demo7506/index.css">
<link rel="stylesheet" href="http://demo.webcss.top/code/demo7506/m.css">
<link rel="stylesheet" href="http://demo.webcss.top/code/demo7506/order.css">
</head>
<body style="background: rgb(243, 243, 243);">

<div class="content">

<!-------------------- 底部 -------------------->

<div class="dibu">
     <a href="javascript:;" class="tiyan"><img src="http://demo.webcss.top/code/demo7506/dibu.png" alt=""></a>
</div>
</div> 

<!-------------------- 弹窗 -------------------->
<script src="http://demo.webcss.top/code/demo7506/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        //弹窗
        $('.tiyan').click(function() {
            $('.tan').show();
        })
        //关闭
        $('.close').click(function() {
            $('.tan').hide();
        })
    })
</script>
<div class="tan">
<div class="popout_order" id="popout_order" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);display: block;">
    <div class="popout_close_icon" style="text-align: right; color: rgb(250, 250, 250); font-size: xx-large; font-weight: bolder; vertical-align: top;">
        <div style="line-height: 100%; cursor: default;"><span class="close">×</span></div>
    </div>
    <div class="order_title" style="color: rgb(250, 250, 250); background-color: rgb(212, 5, 15);">我是标题可以修改</div>
    <script type="text/javascript">
    var wfheight = '475'; //订单高度
            var wfsrc = 'http://www.webcss.top';
    document.write('<iframe src="' + wfsrc + '" width="100%" height="' + wfheight + '" frameborder="0" scrolling="no"></iframe>');
    </script>
</div>
</div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容