Question

我遇到了jquery对话框的问题。

<div id="mycontent" class="modal fade" role="dialog">
      hello brother
</div>

<a class="btn" data-target="#mycontent" data-toggle="modal">Open Modal</a>

我对上面的调用方法（带标记）没有问题，我的对话框看起来很好，我在对话框中看到#mycontent div。

但是，当我按下面的方式调用时，对话框显示为空（我无法在对话框中看到#mycontent div）

<div id="mycontent" class="modal fade" role="dialog">
          hello brother
    </div>

<a class="btn" onclick="showDialog()">Open Modal</a>

<script>

     $(document).ready(function() {
           $('#mycontent').dialog({

             autoOpen:false,
             width:500,
             height:500,
});
})

      function showDialog({
           $('#mycontent').dialog('open');
      })
</script>

为什么出现空对话框？

非常感谢

Answer 1

试用此代码

showDialog()函数

出错

<script>
$(document).ready(function() {
    $('#mycontent').dialog({
        autoOpen:false,
        width:500,
        height:500,
    });
});

function showDialog(){
    $('#mycontent').dialog('open');
};
</script>

https://stackoverflow.com/a/43536575/64904

Answer 2

您的代码很奇怪，而且无法正常工作。尝试这样的事情，请阅读bootstrap文档如何制作模态： http://getbootstrap.com/javascript/

HTML

<div id="mycontent"class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Hello brother;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<a class="btn">Open Modal</a>

jquery的

var showDialog = function()
{
   $('#mycontent').modal('show');
}

 $('.btn').click(showDialog);

链接到JSFIDDLE：https://jsfiddle.net/fx8b0o9q/

Answer 3

你可能为你工作

＆＃13;

$(document).ready(function() {
           $('#mycontent').dialog({
             autoOpen:false,
             width:500,
             height:500,
});
});

      function showDialog(){
           $('#mycontent').dialog('open');
      }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="mycontent" class="modal fade" role="dialog">
          hello brother
    </div>

<a class="btn" onclick="showDialog()">Open Modal</a>

＆＃13;

出现Jquery对话框，内容为空

3 个答案: