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

如何使用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的图像

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

    $(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;
        });

---

您缺少结束div标记

<div id="badgeselect">

---

这家店从不关门。这可能会导致一些奇怪的问题

您只需在img中添加一个click侦听器，并更改该部分的css类即可。 css类可以有display:block

正如您所说，它是一个弹出窗口，您可以设置它在类中的位置以及其他属性，例如不透明度或

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

或

这将创建一个类似弹出窗口的功能。

.dialog不是JavaScript中可用的本机方法。如果您想要一个开箱即用的模式，那么我建议使用JavaScript库，该库内置了这些功能。推特的引导将是一个不错的选择

要开始，请执行以下操作： 在你的

更新：

---

“出现在第页”是什么意思。它是隐藏的吗？您想在某个事件后显示它吗？@Fyre抱歉，是的，这是正确的。基本上，在用户点击页面上的img后，弹出框应该会出现。您在控制台中看到任何错误吗？您使用的是哪个版本的jquery UI？@JonathanCrowe没有控制台错误，我使用的是1.10。2@Dano007你包括引导吗？这个.dialog方法来自哪里？它不是JavaScript的本机。。您使用的是jQueryUI还是其他库？如果是，请说明。看起来很有希望，这也可以让我传递从用户点击ie图像捕获的数据？@Dano007是的，模态方法可以在任何地方调用。。所以你可以随意做你之前做过的事情。

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

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;
}

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

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

<!-- 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});

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