自定义子窗体

最新推荐文章于 2024-09-06 08:22:18 发布

j--j

最新推荐文章于 2024-09-06 08:22:18 发布

阅读量222

点赞数

分类专栏： Vue 文章标签：模态框

本文链接：https://blog.csdn.net/angl129/article/details/80451746

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

自定义子窗体

最近在做一个简单web项目，需要在一个页面上弹出一个窗口，展示信息进行交互操作。使用了Bootstrap模态框插件。主要的思路还是 div+css 实现遮罩+弹出框（在页面中间）。

一、简单说明

1、css：z-index的值越大，被层叠在最上面。

.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0
}

2、模态框属性

data-dismiss="modal" ：是自定义的 HTML5 data 属性，被用于关闭模态窗口，如果不需要点击按钮就关闭弹框，就不要加这个属性。

this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this))

手动打开模态框：modal('show')

手动关闭模态框：modal('hide')

二、例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <h2>弹框实例</h2>
    <button class="btn btn-primary btn-lg" οnclick="showConfirmDialog()">按钮</button>
</div>

<div id="confirmDialog" class="modal fade" role="dialog">
    <div class="modal-dialog" role="document" style="width: 700px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="modaltitle">title</h4>
            </div>
            <form>
                <div class="modal-body" style="max-height: 600px; overflow-y: auto">
                    <label>Content</label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" οnclick="confirmoperate()" data-dismiss="modal" style="width: auto">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>

</div>
<script>
    function showConfirmDialog() {
        var modal = $('#confirmDialog');
        $(modal).modal('show');
    }
</script>
</body>
</html>

展示结果：