时间戳

首页 > 解决方案 > 我如何添加关闭按钮并调整 jQuery 模式的大小

javascript - 我如何添加关闭按钮并调整 jQuery 模式的大小

问题描述

我有以下 jQuery 模式代码：-

<script>
        $(document).ready(function () {
            
            $(function () {
                $.ajaxSetup({ cache: false });
                //$("a[data-modal]").on("click", function (e) {
                $(document).on('click', 'a[data-modal]', function (e) {
                    $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                        $('#myModal').modal({
                            height: 1000,
                            width: 2200,
                            resizable: true,
                            keyboard: true,
                            backdrop: 'static',
                            draggable: true
                        }, 'show');
                       });
                    return false;
                });


            });

            $(function () {

                $(document).on('click', 'a[data-dismiss]', function (e) {

                    if ($(this).attr('data-reload') == 'no') {
                        $(this).parents('.modal').first().modal('hide');

                    }
                });


            });
            });
    </script>

以及以下 HTML 来显示模式：-

 <div id='myModal' class='modal fade in'>
          <div class="modal-dialog">
               <div class="modal-content">
                    <div id='myModalContent'></div>
               </div>
          </div>
 </div>

 <a data-modal='' href="/home/bookappointment" title="Detail"> Book Appointment </a>

但目前模态只会占据屏幕的很小一部分+我无法关闭模态弹出窗口。那么任何人都可以建议我如何扩展模态高度和宽度+为其添加关闭按钮吗？

标签： javascripthtmljquerymodal-dialog

解决方案

您可以像这样使用 data-dismiss="modal" 。

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

推荐阅读