Question

如何使用JS / JQuery打开带有id的html部分？

让我们说我想用JS / JQuery触发的html是

<section class="modal--show" id="show"
        tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">

    <div class="modal-inner">
        <header>
            <h2 id="label-show">A modal</h2>
        </header>

        <div class="modal-content">
            <p>Content.</p>
               <div id="badgeselect">

        </div>

        <footer>
            <p>Footer</p>
        </footer>
    </div>

</section>

我尝试过使用

 $('#show').dialog('open');

哪个不起作用。唯一的另一个考虑因素是，完整代码还必须复制用户点击的图像（以激活show）

我现在有这个，唯一不起作用的是在用户点击图片后在页面上显示上面的代码。

    $(document).ready(function() {
        $('.go img').css('cursor', 'pointer');
        $('.go').on('click', 'img', function(e) {
            $(this).width(100).height(100).appendTo('#badgeselect');

              $('#show').dialog('open');

            });
            SaveMyBadge();
            return false;
        });

Answer 1

您缺少结束div标签。

<div id="badgeselect">

永远不会关闭。这可能会导致一些奇怪的问题

Answer 2

你可以在img中添加一个点击监听器并更改该部分的css类。 css类可以显示：block

当你说它弹出一个弹出窗口时，你可以设置它在你班级中的位置以及其他属性，例如不透明度或简单地

document.getElementById("show").style.display = block;

OR

document.getElementById("show").className = "MyClass";

.MyClass{
   display:block;
   position:absolute;
   top:50%;
   left:50%;
   margin-left:-width/2;
   margin-top:-height/2;
   opacity:0.8;
}

这应该会创建一个类似弹出的功能。

Answer 3

.dialog不是JavaScript中的本机方法。如果你想要一个modal开箱即用，那么我建议你使用内置了这些功能的JavaScript库.Twitter的引导程序将是一个不错的选择。

开始：
在<head>

中

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

包含jQuery

后包含此脚本

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

HTML：

<!-- Modal Markup -->
<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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 -->

启动模态

$('#modal').modal({'show':true});

Bootstrap homepage

<强>更新

$('.go').on('click', 'img', function(e) {
    $(this).width(100).height(100).appendTo('#badgeselect');
    $('#modal').modal({'show':true});
});

如何使用JavaScript / JQuery在页面上显示一个html框？

3 个答案: