相关疑难解决方法(0)

我正在使用twitter bootstrap的模态弹出窗口.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

我可以使用带有这个a元素的ajax加载内容:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

现在我必须打开相同的模态,但使用不同的URL.我正在使用这个模态来编辑我的数据库中的实体.因此,当我在实体上单击编辑时,我需要加载带有ID的模态.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

如果我点击1号链接,它可以正常工作.但是,如果我再单击链接号2,则模态内容已经加载,因此它将显示链接号1的内容.

如何在twitter bootstrap模式弹出窗口中刷新或重置ajax加载的内容？

我想让我的bootstrap模式使用ajax检索数据:

<a href="{{ path('ajax_get_messages', { 'superCategoryID': 35, 'sex': sex }) }}" data-toggle="modal" data-target="#birthday-modal">
  <img src="{{ asset('bundles/yopyourownpoet/images/messageCategories/BirthdaysAnniversaries.png') }}" alt="Birthdays" height="120" width="109"/>
</a>

我的模态:

<div id="birthday-modal" class="modal hide fade">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Birthdays and Anniversaries</h3>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
    <a href="#" data-dismiss="modal" class="btn">Close</a>
    {#<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>#}
</div>
</div>

当我点击链接时,会显示模态但是正文是空的.此外,我没有看到任何ajax请求.我正在使用Bootstrap 2.1.1

我究竟做错了什么？

我希望能够通过Bootstrap的模态插件在页面上使用多个不同的链接重用一个模态div:

<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br />
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br />

<!-- Modal -->
<div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Click outside modal to close it</h3>
  </div>
  <div class="modal-body">
    <p>One fine …

我想在每行上单击视图或更新按钮时在我的gridview上实现Yii2模式对话框.

任何人都可以建议如何实施它？

根据arogachev的建议:这是我的代码的更新

<?php 

//var_dump($dataProvider);
$gridColumns = [
    [   
        'format' => 'html',
        'attribute' => 'avatar',
        'label'=>'Image',
        'headerOptions' => ['width' => '80%',],     
    ],

    [   'class' => 'yii\grid\ActionColumn', 
        'template' => '{view} {delete}',
        'headerOptions' => ['width' => '20%', 'class' => 'activity-view-link',],        
            'contentOptions' => ['class' => 'padding-left-5px'],

        'buttons' => [
            'view' => function ($url, $model, $key) {
                return Html::a('<span class="glyphicon glyphicon-eye-open"></span>','#', [
                    'id' => 'activity-view-link',
                    'title' => Yii::t('yii', 'View'),
                    'data-toggle' => 'modal',
                    'data-target' => '#activity-modal',
                    'data-id' => $key,
                    'data-pjax' => '0',

                ]);
            },
        ], …

我必须在模态窗口中加载页面(内部URL).我一直在使用window.showModalDialog(url,null,features),但这在Safari,Chrome上无法正常工作.所以我们决定使用Bootstrap的模态对话框.我无法完成这项工作.我有什么想法可能做错了吗？

    //imports
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">


    //activate content as modal
      $(document).ready(function(){
            $('#test_modal').modal({

                });
    }

    .......
    .......

    $("#btnSubmit").click(function(){
     var url = constructRequestURL();
      $('#test_modal').modal(data-remote=url,data-show="true");
    });


    -----
    -----
    <div class="modal fade" id="test_modal">
</div>

假设我有一个循环生成X次的以下链接.

<a class="btn" data-toggle="modal" data-target="#view_more" href="/item/view/<?php echo $item_id; ?>">Launch Modal</a>

这是启动模态的JS脚本.

$(document).ready(function () {
    $('#view_more').modal({
        remote: '/item/view/1',
        show:false
}); // Start the modal

它在remoteurl被硬编码时有效,但我希望它是动态的,具体取决于传递给它的内容.

我有一个打开对话框的按钮.我只希望它在没有禁用按钮时打开(使用css类或span元素上的disable属性.这可能吗？我认为这是不可能的,我只能通过删除漂亮的data-toggle="modal"功能来修复它,并使用我自己的javascript做这部分.我希望从两者中获得最佳效果.

按钮:

<span title="View Package Log" data-toggle="tooltip">
    <span id="logComputerPackageComputerAndDevice" 
          data-toggle="modal" 
          data-target="#computerPackgageLogDialog" 
          class="btn btn-primary disabled" 
          disabled>
        <i class="fa fa-file-text-o"></i> Package Log
    </span>
</span>

模态对话框:

<!-- Modal -->
<div id="computerPackgageLogDialog" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="computerPackgageLogDialogHeader"></h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        @Html.TextArea("computerPackgageLogContent", "", new { @class = "form-control", rows = "20", @readonly = "readonly" })
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

更新:添加了JavaScript事件处理:

$('body').on('click', '#logComputerPackageComputerAndDevice:not(.disabled)', …