bootstrap modal 弹出其他页面

心已赠人 2022-08-05 08:56 225阅读 0赞

1、不使用js 方式

1.1 按钮

<a class=" btn default" href="ui_modals_ajax_sample.html" data-target="#ajax" data-toggle="modal">
    										View Demo </a>

1.2 对话框

<div class="modal fade" id="ajax" role="basic" aria-hidden="true">									
    									<div class="modal-dialog">
    										<div class="modal-content">
    										</div>
    									</div>
    								</div>

1.3其它页面

div class="modal-header">
    	<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    	<h4 class="modal-title">Ajax Content</h4>
    </div>
    <div class="modal-body">
    	<div class="row">
    		<div class="col-md-12">
    			<h4>Some Input</h4>
    			<p>
    				<input type="text" class="col-md-12 form-control">
    			</p>
    			<p>
    				<input type="text" class="col-md-12 form-control">
    			</p>
    			<p>
    				<input type="text" class="col-md-12 form-control">
    			</p>
    			<p>
    				<input type="text" class="col-md-12 form-control">
    			</p>
    			<p>
    				<input type="text" class="col-md-12 form-control">
    			</p>
    			<p>
    				<input type="text" class="col-md-12 form-control">
    			</p>
    			<p>
    				<input type="text" class="col-md-12 form-control">
    			</p>
    		</div>
    	</div>
    </div>
    <div class="modal-footer">
    	<button type="button" class="btn default" data-dismiss="modal">Close</button>
    	<button type="button" class="btn blue">Save changes</button>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 页面自动弹出,javaScript实现自动弹出页面

window.open()的所有参数列表(转载) 前言:经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一

╰+攻爆jí腚メ/ 2022年10月06日 00:47/ 0 赞/ 231 阅读

相关简单的Modal弹出插件

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/2fc4d9d901714c4

小灰灰/ 2022年09月11日 08:25/ 0 赞/ 191 阅读

相关 bootstrap弹出框

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

约定不等于承诺〃/ 2022年08月23日 14:00/ 0 赞/ 364 阅读

相关用Bootstrap框架弹出iframe页面在弹出的模态框中载人iframe页面

HTML代码： <div class="modal fade" id="NoPermissionModal"> <div class=

叁歲伎倆/ 2022年08月12日 10:29/ 0 赞/ 218 阅读

相关 bootstrap modal 弹出其他页面

1、不使用js 方式 1.1 按钮 <a class=" btn default" href="ui_modals_ajax_sample.html" data-t

心已赠人/ 2022年08月05日 08:56/ 0 赞/ 226 阅读

相关 bootstrap modal弹出框实现及实现按钮点击复制功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h

迈不过友情╰/ 2022年05月23日 11:40/ 0 赞/ 282 阅读

相关 Bootstrap 弹出输入框

效果 ![这里写图片描述][70] 原理引入 `Bootstrap` 和 `jQuery` 在 `弹框` 中加入输入框，同时 `自动获得焦点`

柔光的暖阳◎/ 2022年05月18日 01:42/ 0 赞/ 345 阅读

相关 bootstrap 弹出框modal添加垂直方向滚轴

效果图预览 ![70][] 1. 添加css样式 .modal-dialog{position: absolute; top: 0; bottom: 0;

谁践踏了优雅/ 2021年10月08日 07:18/ 0 赞/ 415 阅读

相关 BootStrap modal模态弹窗使用

默认的model案例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta

- 日理万妓/ 2021年09月14日 10:22/ 0 赞/ 470 阅读

相关 bootstrap中的模态框（modal，弹出层）

`bootstrap`中的模态框（`modal`），不同于`Tooltips`，模态框以弹出对话框的形式出现，具有最小和最实用的功能集。务必将模态框的 HTML 代码放在

女爷i/ 2021年06月26日 16:06/ 0 赞/ 662 阅读