标签: bootstrap-modal

我想在缩略图库中显示一些图像,如果单击图像,它将在模态中显得更大.

如果我将模态的链接保留为图像,那么除了右上角的关闭符号之外,它不会在页眉或页脚显示任何内容.

我正在使用bootstrap.我还想知道我是否可以将img标签替换为<a>标签以打开模态部分.请帮忙.

这是代码:

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt="">
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt="">
                    </div>
                    <div class="modal-footer">
                        <p>This is footer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

使用Bootstrap v3.3.5

我有一个使用网址的网页 domain.com/companies

这是我在该网页中模式的触发器.

<a href="#modal-add-company" class="btn btn-effect-ripple btn-effect-ripple btn-success" data-toggle="modal"><i class="fa fa-plus"></i> New Company</a>

这将成功触发此模态

<div id="modal-add-company" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">

但是,网址不会更改为 domain.com/companies#modal-add-company

url domain.com/companies#modal-add-company实际上也不会在重新加载时触发模态.

如何进行以下操作我需要做什么:

1. domain.com/companies#modal-add-company每次触发模态时都会更改网址,并显示模态,并且
2. 如果我直接输入网址domain.com/companies#modal-add-company,则显示模态

当表数据包含巨大的文本时,我有一个关于模态的问题,它会在外面溢出.我也使用过这里的数据表.

见下图:

我知道我可以通过使用将长文本移动到新的文本word-wrap:break-word;但是如何添加该类？还有一种方法可以改变模态尺寸吗？

显示模态的代码:

responsive: {
   details: {
    display: $.fn.dataTable.Responsive.display.modal( {
        header: function ( row ) {
            var data = row.data();
            return 'Details for '+data['first_name']+' '+data['last_name'];
        }
    } ),
    renderer: $.fn.dataTable.Responsive.renderer.tableAll({
     tableClass: 'table'
    })
   }
  }

在这里小提琴

我在这里找到了两个类似的答案，但都无法满足我的情况（鉴于我将其转化为我的情况的能力有限）。我的页面上有很多相当大的图像，Bootstrap的默认方法是在页面加载时加载所有模式图像。可见的html渲染速度相当快（我有一个微调器），但是隐藏模式的额外加载时间使该页面不切实际。我希望页面仅加载可见（非模态）内容以完成页面加载（并清除微调器），然后仅在触发该模态时才加载每个模态的内容。我已经尝试了所有可以找到的惰性加载解决方案，但是这些图像将不会以模式呈现（“ data-src”占位符会呈现，但不会呈现应该替换它们的“ src”图像）。我只想延迟加载（或加载'show.bs。模态”）的大模态图像，即“模体”类别中的图像。我希望这足够清楚。

样例代码：

/* Javascript placed in the head */

<script>

function lazyLoad(){
    var $images = $('.lazy_load');

    $images.each(function(){
        var $img = $(this),
            src = $img.attr('data-src');

        $img
            .on('load',imgLoaded($img[0]))
            .attr('src',src);
        });
    };

    $('.modal-body').on("show.bs.modal", function () {
    lazyLoad();
};          

</script>

/* HTML in the modal section */


<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="galleryheader">
                <img src="headerimage_1.png" height="77" width="1024">
            </div>
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div>
                        <div class="modal-body lazy_load"> …

我有一个带有文本'观看视频'的播放图像,当点击时会打开一个引导模态窗口来播放我放入的视频.我已经有了moday视图可以工作.我遇到的问题是当我播放视频并在播放时退出屏幕时,视频继续在后台播放.如果我再次点击观看视频链接,它将播放之前停止的视频.

当模态窗口关闭时,我需要停止视频.然后,我需要在下次单击"观看视频"链接时从头开始播放视频.我还是新手,我不知道该怎么做.谁知道我怎么能做到这一点？

<div class="col-md-12 f-play" data-toggle="modal" data-target="#myModal">
    <img class="f-play-image" src="images/play.svg" data-target="#myModal" data-video-fullscreen="">Watch video
</div>

<div id="myModal" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7pvci1hwAx8?" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>

        </div>
    </div>
</div>

我有我的模态:

<div id="defaultModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="modal-title">Modal Title</h3>
            </div>
            <div class="modal-body" data-table="table" data-id="">
            </div>
        </div>
    </div>
</div>

我有我的按钮:

<button  href="page.php" data-title="New Data" class='call-modal btn btn-success' > 
    <i class="glyphicon glyphicon-plus"></i>
</button>   

点击按钮后我使用"call-modal"类:

$('.call-modal').on('click', function(e){
    e.preventDefault();
    $('#defaultModal')
    .find('.modal-header > h3').text("Teste").end()            
    .find('.modal-body').load($(this).attr('href')).end()            
    .modal('show');
});

我可以加载内容,但我想使用数据标题设置标题.

知道为什么它不起作用吗？

谢谢

我有这种格式的数据集(df)

index <- runif(n = 100,min = 0, max = 1)
type1 <- rep("low", 50)
type2 <- rep("high", 50)
type <- c(type1,type2)

level1 <- rep("single", 25)
level2 <- rep("multiple", 25)
level3 <- rep("single", 25)
level4 <- rep("multiple", 25)
level <- c(level1,level2,level3,level4)

block <- rep(1:5, 10)
set <- rep(1:5, 10)

df <- data.frame("index" = index,"type" = type, "level" = level, "block" = block, "set" = set)
df$block <- as.factor(df$block)
df$set <- as.factor(df$set)

我想创建一个看起来像这样的模型

model <- lmer(index ~ type * level + …

我正在尝试获取通过 jquery 传递的输入值并将其设置为 php 变量，但我不知道该怎么做。

此按钮具有我要发送的值：

<button type='button' data-a='".$fila['idPlaza']."' href='#editarUsuario' class='modalEditarUsuario btn btn-warning btn-xs' data-toggle='modal' data-backdrop='static' data-keyboard='false' title='Editar usuario'><img src='../images/edit.png' width='20px' height='20px'></button>

然后我有这个js代码来发送值：

    $(document).on("click", ".modalEditarUsuario", function (e) {
        e.preventDefault();

        var self = $(this);

        $("#a").val(self.data('a'));

        $(self.attr('href')).modal('show');
    });

最后我有这个引导模式

<!-- MODAL EDITAR-->
<div id="editarUsuario" class="modal fade modal" role="dialog">
<div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h2 class="modal-title">Editar usuario</h2>
            </div>
            <form name="formularioModificaUsuario" method='post' action="usuarios.php">
            <div class="modal-body">
                <input type="text" class="form-control" name="idPlaza" id="a">
                <?php 
                    $valueA = ???
                ?>
            </div> …

我是 Angular 的新手并试图实现一个模态。关闭/关闭模态时出现问题 - 当我单击取消按钮时，没有任何反应。这是控制器代码：

angular.module('navApp')
    // Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
        $scope.title = "Hello, Angm-Generator!";
        $scope.open = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalCtrl'
            });
        };
    }])

    .controller('ModalCtrl', function ($scope, $uibModalInstance) {
        // Added some content to Modal using $scope
        $scope.content = "ModalCtrl, Yeah!"
        // Add cancel button
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    })

这是实际模态的模板视图

<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header"> …

我正在为 Bootstrap 模式编写自定义转换。如何使它从您单击的按钮缩小（缩放）到中心，然后当您关闭它时，放大回按钮？

我发现这个例子带有缩放（缩放）过渡，但它从一个地方缩放，而不是自定义参考点：

var $modal= $('.modal');

$('.target-area').on('click', function (e) {
    $modal.css({top: e.clientY, left: e.clientX, transform: 'scale(0.1, 0.1)'});
    $modal.modal();
    $modal.css({top: '', left: '', transform: ''});
});


$('#dismissModal').click(function(){
    $modal.css({top: 0, left: 0, transform: 'scale(0.1, 0.1)', opacity:'0'});
setTimeout(function(){
        $('.modal').modal('hide')
    },750);
});

$modal.on('hidden', function () {
    $modal.css({top: '', left: '', transform: '', opacity:''});
});

....

<div class="target-area">
    Click anywhere to launch modal
</div>

<div class="modal hide">
  <div class="modal-header">
      <h3>Header</h3>
  </div>
  <div class="modal-body">
    Body
  </div>
  <div class="modal-footer">
    <button type="button" id="dismissModal" class="btn">Ok</button>
  </div> …