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

Question

How can I open an section of html with an id using JS/JQuery? 如何使用JS / JQuery打开具有ID的html部分？

Lets say the html I want to trigger with JS/JQuery is 可以说我想用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>

I've tried using 我试过使用

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

which doesn't work. 这不起作用。 The only other consideration is, that the full code must also copy an image that the user clicks on (to activate show ) 唯一的其他考虑是，完整代码还必须复制用户单击的图像（以激活show ）

I have this at the moment, the only part not working is making the above code show on the page after the user has clicked the image. 目前，我已经有了这个功能，唯一无法正常工作的部分是在用户单击图像后在页面上显示了上面的代码。

    $(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

You are missing a closing div tag. 您缺少结束div标签。

<div id="badgeselect">

is never closed. 永远不会关闭。 That could be causing some strange issues 那可能会引起一些奇怪的问题

Answer 2

Well you could just add a click listener to the img and change the css class of the section. 好吧，您可以将点击侦听器添加到img并更改该部分的css类。 The css class could have display:block CSS类可能具有display：block

and as you stated its a pop up you could set its position in your class along with other properties such as opacity or simply 当您说出它的弹出窗口时，可以设置其在类中的位置以及其他属性，例如不透明度或简单地

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

This should create a pop up like feature. 这应该会创建一个弹出式功能。

Answer 3

.dialog is not a native method available in JavaScript. .dialog不是JavaScript中可用的本机方法。 If you want a modal out of the box then i recommend using a JavaScript Library which comes with such features built in. Twitter's bootstrap will be a good option. 如果您想开箱即用的modal ，那么我建议使用内置有此类功能的JavaScript库。Twitter的引导程序将是一个不错的选择。

To get started: 开始：
In your <head> 在你的<head>

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

Include this script after you include jQuery 包含jQuery之后，包含此脚本

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

HTML: 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 -->

To launch the modal 启动模态

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

Bootstrap homepage 引导首页

UPDATE: 更新：

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

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

问题描述

3 个解决方案

解决方案1
0 2014-07-27 18:15:45

解决方案2
0 2014-07-27 18:17:17

解决方案3
0 已采纳 2014-07-27 18:26:50

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

问题描述

3 个解决方案

解决方案1 0 2014-07-27 18:15:45

解决方案2 0 2014-07-27 18:17:17

解决方案3 0 已采纳 2014-07-27 18:26:50

解决方案1
0 2014-07-27 18:15:45

解决方案2
0 2014-07-27 18:17:17

解决方案3
0 已采纳 2014-07-27 18:26:50