模态框-----》百度搜索案例

最新推荐文章于 2023-09-11 00:30:00 发布
最新推荐文章于 2023-09-11 00:30:00 发布
阅读量339 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44389107/article/details/88562794 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .box{
            margin-top:15%;
        }
        .margin{
            margin-top:20px;
        }
    </style>
</head>
<body>

<button class="btn btn-primary" data-toggle="modal" data-target=".box1">登录</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<div class="container box">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!--输入框组-->
            <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-primary">百度一下</button>
                </span>
            </div>
        </div>
    </div>
</div>
<!--
第一层  modal  全屏颜色 透明度
第二层  modal-dialog  自适应宽度 当小于768px后,宽度是100%
第三层  modal-content  分三层   ① modal-header  ② media-body   ③ modal-footer
-->
<div class="modal box1 fade">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <!-- data-dismiss="modal" 实现关闭的动作-->
                <button class="close" data-dismiss="modal">&times;</button>
                <h5>登录百度账号</h5>
            </div>
            <div class="media-body">
                <div class="col-md-10 col-md-offset-1 margin">
                    <input type="text" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="col-md-10 col-md-offset-1 margin">
                    <input type="text" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="col-md-10 col-md-offset-1 margin">
                    <input type="text" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="col-md-10 col-md-offset-1 margin">
                    <input type="checkbox">
                    下次自动登录
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-md-12">
                    <input value="登录" type="button" class="form-control btn btn-primary">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    // $('.box1').modal()
    $('[data-toggle="tooltip"]').tooltip();
</script>
</body>
</html>
【花雕动手做】简单搜索“驴友花雕”来测试已接入DeepSeek-R1满血版的百度AI搜
雕爷学编程
03-07 1300
DeepSeek-R1满血版通过融合百度的RAG等优势技术，优化了模型的性能，减少了幻觉现象，并且提升了搜索结果的准确性和实用性。用户给出的搜索结果有8条，其中‌1、‌2、‌3和‌4都是直接与驴友花雕相关的。开设专栏《花雕学AI》，系统研究ChatGPT、New Bing等工具，探索AI在文本生成、多模态创作、代码编写等场景的应用，并总结出13种Prompt技巧及内容优化方法‌。最后，确保回答符合格式要求，不使用“根据搜索结果”等词汇，所有引用都用角标标注在句末，每个段落都有适当的引用来源。
初识langchain[1]：Langchain实战教学，利用qwen2.1与GLM-4大模型构建智能解决方案[含Agent、tavily面向AI搜索]
最新发布
丨汀、的博客
07-16 2273
初识langchain[1]：Langchain实战教学，利用qwen2.1与GLM-4大模型构建智能解决方案[含Agent]
百度的模态弹出窗口
weixin_30417487的博客
06-07 134
今天是全国高考的第一天,首先祝所有的考生都能取得好成绩,时间过的挺块的,5年前的自己也是经历了这黑色的六月. 回到正题,今天晒给大家的是百度的模态弹出窗口.由于之前的项目要用到这样的窗口,所以就从百度中把它的这个窗口给借用了,当然,版权归百度所有,我只是把它的代码整合了下，也从它的代码中学到了一些思想. 先贴下效果图: 弹出网页(相当于window.showdialog('...');...
模态框案例
07-30 1057
模态框 模态框在很多网站是很常见的，比如网易云音乐登录，百度登录等网站。 网易云音乐如图： 让我们来看看代码吧！！注意：这里为了更好的演示效果，增加了遮挡层。 HTML部分： <!-- 外盒子 --> <div class="box"> <!-- 视频 --> <video src="index-video.mp4" loop autoplay preload muted></video> <!-- 倒计时 -->
Bootstrap(书籍查询&购物车&模态框)
qq_62981121的博客
05-14 326
媒体对象实现书籍查询页面 <!-- 导航条 start --> <div class="col-sm-12"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">欢迎进入</a> <button cla...
bootstrap模态框实例
岁月如歌去，十年弹指间
10-26 723
&lt;div class="update_wrap"&gt; &lt;div class="text-center"&gt; &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="
浙商证券-20230405-人工智能行业专题报告：多模态AI研究框架.pdf
06-05
2. **多模态AI的应用拓展**：多模态AI可以处理多种类型的数据，如文本、语音、图像和视频，从而广泛应用于跨模态任务，如智能搜索、图像识别、语音识别和情感分析等。 3. **核心技术环节**：多模态AI的核心技术包括...
云计算实战应用案例精讲-【自动驾驶】多模态融合智能检测方法及 SLAM 车载实现（论文篇）
qq_36130719的博客
04-20 1893
针对助老陪护应用场景，为了使智能机器人更好地实现交互，本文选择了语音、手势和场景对象进行融合识别。针对助老陪护的现实特点，为了达到更自然的交互效果，本文识别了老年人日常生活陪护和心理陪护游戏中的四种模态信息。在手势识别方面，本文分析研究了老年人表达意图经常使用的几种手势，并在项目组前期工作基础上完成识别与应用[58]。在语音识别方面，本文通过现有接口，完成音频文件到语言文字的识别转换。在场景对象的检测方面，本文实现了日常生活用品的目标检测，以及心理陪护游戏中所使用游戏积木的检测。
MATLAB算法实战应用案例精讲-【大模型】LLM算法
qq_36130719的博客
09-11 1452
大语言模型（LLM）是指使用大量文本数据训练的深度学习模型，可以生成自然语言文本或理解语言文本的含义。大语言模型可以处理多种自然语言任务，如文本分类、问答、对话等，是通向人工智能的一条重要途径。
在BootStrap的modal(模态框)中使用Select2(下拉框带搜索框)
weixin_46212682的博客
02-21 4750
github地址：https://github.com/ttskch/select2-bootstrap4-theme 引入Selelct2的CSS文件，按路径查找 其次引入Selelct2的JavaScript文件 地址：https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js 使用，这里我就使用几条数据 <select class="single-select"> <optionvalue=.
使用模态框进行登录
良子的博客
04-23 5025
我们在浏览网页时常常会遇到登录时候，网站并没有跳转到登录页面而是弹出一个alert来用于登录。其实这个弹出窗口就是一个modal（模态框）（是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭）。在这里我简单介绍以下模态框使用以及登录的一些效果（提示：由于实现这种功能的方法很多，这里简单介绍用于使初学者有个基本了解，大神请绕过）
在模态框中加select2元素，下拉搜索框不能搜索解决办法
qq_16254641的博客
05-28 2558
页面上写了一个弹框，弹框里加了select2类型的搜索框，搜索框弹出后无法输入内容。参考网上，找到了解决方案：重写模态对话框的enforceFocus函数        $.fn.modal.Constructor.prototype.enforceFocus = function () { }        原来是模态对话框强制使自己处于焦点状态，导致select2的搜索框无法获取焦点所致。...
模态框回车搜索的实现
javaboy
09-07 973
       总结一个小功能，实现过程如下：      功能一：  /* 模态框回车搜索的实现： */           //①先禁止回车触发表单提交           $(document).keydown(function(event){                  if (event.keyCode == 13) {                   $('#addClerk...
Bootstrap练习：百度登录框
斜键仙的博客
11-03 2987
练习：点击登录，弹出一个登录表单，运用到了bootstrap模态框知识和js的插件，练习源文件在下面给出自行下载。 目录一、练习目录结构二、练习源码三、运行效果小结 一、练习目录结构 二、练习源码 index.html文件代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
实现百度登录框功能
u012330424的专栏
04-20 2515
今天课程要求实现百度的登录框功能，晚上花费了两个小时终于搞定，直接上代码 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="
百度地图 在模态框居中问题
u013365404的专栏
07-09 779
百度地图 在模态框居中问题  我的解决方法：给弹出框加个点击初始化地图事件
黑色响应式IT网站模板下载 - 空间与主机服务
Bootstrap包含了按钮、表单、导航、分页器、模态框等各种组件，同时也支持网格系统实现响应式布局。在提供的IT科技空间主机提供商企业网站模板中，使用Bootstrap框架可以大大减少开发时间和成本，同时保证了网站的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值