bootstrap modal 弹出其他页面

最新推荐文章于 2025-06-28 16:11:18 发布

weixin_30375247

最新推荐文章于 2025-06-28 16:11:18 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoruilin/p/9617655.html

本文介绍了一种不使用JavaScript实现模态框的方法，通过HTML和CSS完成交互效果，包括按钮触发、模态框结构及内容展示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此文是可以的，是复制的然后粘贴

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>