模态弹框(Modal)的简单使用

最新推荐文章于 2024-03-28 15:47:25 发布
最新推荐文章于 2024-03-28 15:47:25 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： PHP bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40627714/article/details/118578842
版权
  1. 先导入扩展类
    use yii\bootstrap\Modal;
  2. 代码具体如下
    <?php
	$js = <<<JS
	    $('#page-modal').modal('show');//页面加载完显示模态框
	    $('.modal-dialog').css('width', '1580px');//设置模态框宽度
	JS;
	$this->registerJs($js);
	
	Modal::begin([
		'id' => 'page-modal',
		'header' => '<h3>客户感兴趣的listing</h3>',
		'footer' => '<div><a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a></div>',
		'options'=>
		[
			'data-backdrop'=>'static',//点击空白处不关闭弹窗
			'data-keyboard'=>false,
			'data-show'=>true,
		],
		'size'=>'modal-lg',
	]);
?>
*小确幸*
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
useModal（简单）
天空影
06-30 6218
介绍 因为一个项目中会有很多弹框，然后如果是同类型的弹框的话每次都要重新写一遍Modal。这样的话也不能说有事，就是会写很多重复代码并且在后期维护会感觉很难受，所以基于hooks我们也可以简单的做一个useModal。 这里的话我是做了一个基于表单的useFormModal。 封装 hooks/useFormModal import React, { useState } from 'react'; import { Modal } from 'antd'; interface modalState {
use-modal:React Hook进行模式管理
04-08
useModal 处理最常见的用例以创建类似于Modal的组件： 进入/离开动画 按Escape键或在外部单击时关闭 呈现部分由您决定，此挂钩可用于模式，抽屉，下拉菜单以及几乎任何处于打开和关闭状态的东西。 用法 简单的例子 import * as React from 'react' const Modal = ( ) => { const [ open , setOpen ] = React . useState ( false ) const modal = useModal ( { open , onClose : ( ) => setOpen ( false ) } ) return ( < React> < button onClick = { ( ) => setOpen ( true ) } > Open < /
React Hooks： use modal
weixin_30609287的博客
08-01 762
useModal: export const useModal = (initTitle: string, initContent: string | React.ReactElement) => { const [visible, setVisible] = useState(false); const [title, setTitle] = useSt...
antd中Modal组件的使用
热门推荐
weixin_43734184的博客
08-21 1万+
对于刚接触antd的小白来说来弄懂Modal组件，还真不是一件简单的事情，关于如何取值，如何赋值，是我刚开始遇到的很大的问题： 1.Modal组件的使用 首先想去很好的展示Modal框，得需要明白该组件中的一些属性，官网介绍的也很详细，这里给大家展示我经常使用的属性： 还有destroyOnClose： 这里给简单大家看一下一个例子： 写法就是这样去写。 2.Modal数据展示 关于如何通过...
这样使用React弹窗会更方便 -- use-modal
weixin_34148340的博客
03-22 2793
主流modal大多需要在组件内使用state控制是否显示，在多个地方调用的时候很不方便，所以基于 context 提供一个更加易用的调用方式。 use-modal 支持主流的modal, 理论上只要modal通过类似于 show props 控制显示的，就可以支持，例如: antd react-bootstrap react-overlays react-modals material-ui ...
模态弹框（Modal）简单实用
weixin_30629653的博客
09-08 390
1.需要引用bootstrap的js、css文件，且需引用jquery文件，因为bootstrap的js依赖jquery <script type="text/javascript" src="../assets/js/jquery.2.1.1.min.js"></script> <script type="text/javascript" src="../a...
弹出模态框modal的实现方法及实例
10-19
主要介绍了弹出模态框modal的实现方法及实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
Bootstrap模态框（Modal）是该框架中一个非常重要的组件，它用于创建弹出式的对话框，常用于显示额外信息、表单输入或用户交互。然而，默认情况下，模态框在页面上的位置并不是水平垂直居中的，而是固定在距离顶部30...
popModal自动弹框
07-31
"popModal"是一种流行的弹出窗插件，它提供了多种类型的弹出功能，包括弹出窗口、通知弹出、工具提示、模态对话框以及titleModal。这些功能在网页应用和桌面应用中广泛使用，以增强用户体验并提供信息反馈。 1. **...
Bootstrap 模态框（Modal）带参数传值实例
01-19
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。  为了实现父窗体与其的交互，通常需要向其传值，实现带...
微信小程序 弹框和模态框实现代码
08-31
在微信小程序开发中，弹框和模态框是常用的用户交互元素，用于展示临时信息、提示用户操作或获取用户输入。本文将详细讲解如何在微信小程序中实现弹框和模态框，并提供相应的代码示例。 首先，微信小程序提供了`wx....
Antd v5.8 modal.confirm 手动控制关闭
天问博客-专注于大前端技术
12-14 1824
开发中经常需要使用操作提示弹窗，在 Antd 中的 Modal 组件提供了 confirm 方法，可以快速实现操作提示弹窗。本文就来介绍一下如何使用 Modal.useModal 创建弹窗，并且实现手动控制弹窗的关闭逻辑。
Modal对话框（antd-design组件库）简单使用
我都博客
06-25 1226
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。 另外当需要一个简洁的确认框询问用户时，可以使用 App.useApp 封装的语法糖方法。
vue中使用iview的modal弹窗嵌套modal出现格式错误的问题
upStar1的博客
07-04 1426
问题：一个全屏modal，点击按钮，再弹出一个modal，就会出现这种格式问题。 解决：搜了一下，说是因为modal的使用是平级的，z-index都是1000，所以后面的会覆盖前面的。不知道是不是因为这个，因为我把嵌套的这个modal改成全屏的，就没有问题了。解决办法是说给modal加一个类名， z-index改一下就行了，除了要改嵌套modal（以下简称modal2）的z-index，modal2的mask（阴影）也需要改。......
vue 弹窗_深度解析！Vue3 & React Hooks 新UI组件原理：Modal 弹窗
weixin_39875832的博客
11-21 180
前言在某个月黑风高的晚上...没剧刷的我无意想起以前处理的一些弹窗的坑。然后又无意间刷到“Portal”，才知道Modal的实现还有如此妙的方式，顺而想着干脆把UI组件库的实现原理看完。本文将讲述以下三种 Modal弹窗类的实现原理：1. Modal弹窗的基本原理我给弹窗类的定义是脱离固定的层级关系，不再受制于层叠上下文的组件。常见的Modal模态框、Dialog对话框、Notifica...
一个帮助简化 antd Modal 状态管理的工具
最新发布
sdasdas12的博客
03-28 418
一个帮助简化 antd Modal 状态管理的工具。
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
layman1024的博客
05-02 2323
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框 本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用，效果大气漂亮且很实用！ 由于浏览器提供的alert和confirm框体验不好，而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数，所以很多项目 都会自定义对话框组件。本篇文章介绍自己在项目中基于
react useModal自定义弹窗代码
吃瓜群众的博客
12-07 647
react useModal自定义弹窗代码
如何使用插槽封装弹框组件
04-05
在Vue中，可以使用插槽封装弹框组件。以下是一个示例： ``` <template> <div> <button @click="showModal = true">打开弹框</button> <transition name="modal"> <div v-if="showModal" class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header">默认标题</slot> <button class="modal-close" @click="showModal = false">X</button> </div> <div class="modal-body"> <slot name="body">默认内容</slot> </div> <div class="modal-footer"> <slot name="footer"> <button @click="showModal = false">关闭</button> </slot> </div> </div> </div> </div> </transition> </div> </template> <script> export default { data() { return { showModal: false } } } </script> ``` 这个组件包含了一个按钮，当用户点击按钮时，弹出一个模态框。模态框的内容由插槽来提供。组件模板中定义了三个插槽，分别是header、body和footer。如果用户没有提供插槽内容，那么组件就会显示默认内容。如果用户提供了插槽内容，那么组件就会显示用户提供的内容。 这个组件使用了Vue的过渡效果来实现弹框的动画效果。当弹框出现时，会有一个淡入的效果；当弹框关闭时，会有一个淡出的效果。这个过渡效果的名称是“modal”，可以在组件的样式中定义。 这个组件的使用方法如下： ``` <template> <div> <my-modal> <template v-slot:header> <h2>自定义标题</h2> </template> <template v-slot:body> <p>自定义内容</p> </template> <template v-slot:footer> <button @click="showModal = false">确认</button> </template> </my-modal> </div> </template> <script> import MyModal from './MyModal.vue' export default { components: { MyModal }, data() { return { showModal: false } } } </script> ``` 在这个示例中，我们使用了自定义组件MyModal，并为它提供了三个插槽：header、body和footer。我们在这些插槽中提供了自定义的内容，以替换默认的内容。最后，我们将MyModal组件包裹在一个div中，并将这个div显示在页面上。当用户点击按钮时，弹框就会出现，并显示用户提供的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值