子比主题调用现有的模态框

子比主题其实也是写好了模态框的,其使用方法很简单,使用主题自带的css样式,然后通过HTML代码写具体模态框的内容,然后通过主题的JS文件弹窗显示,使用javascript:void($(‘#modal_16208’).modal(‘show’));作为触发条件

代码:

<div class="wp-block-zibllblock-modal"><div class="modal fade" id="modal_16208" aria-hidden="true" data-bkg1="false" aria-bkg2="false" role="dialog" tabindex="-1"><div class="modal-dialog undefined"><div class="modal-content"><div class="modal-header"><strong class="modal-title">温馨提示:</strong><button class="close" data-dismiss="modal"><div data-class="ic-close" data-svg="close" data-viewbox="0 0 1024 1024"></div></button></div><div class="modal-body"><!-- wp:paragraph -->
<p>我的坚果猫</p>
<!-- /wp:paragraph --></div></div></div></div></div>

调用代码:

  • 在按钮里写href=”javascript:void($(‘#modal_16208’).modal(‘show’));”

举例:

<span class="an_1 but b-blue"><a href="javascript:void($('#modal_16208').modal('show'));">测试</a></span>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
javascript前端

JavaScript监控鼠标滚动方向

2023-4-9 10:27:04

csshtmljava

利用HTML+CSS+JS完成弹窗功能并具备关闭按钮

2023-4-22 16:23:30

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索