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;
});
.dialogJavaScriptで使用できるネイティブメソッドではありません。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">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加