JSFiddle - React, Tailwind, and code Playground
HTML
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a href="#" class="popup" data-action="/blog/Usuario/listagem/1/10/1" data-target="popup-usuario">Usuários</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div id="container"></div>
<div class="dialog" id="popup-usuario">Isto aparece
<div class="text">Isto não aparece</div>
</div>
<div class="dialog" id="popup-permissao">
<div class="text"></div>
</div>
<div class="dialog" id="popup-grupo">
<div class="text"></div>
</div>
JavaScript
$(document).on('click', '.popup', function (event) {
console.log('=== click_event_popup ===');
event.preventDefault();
event.stopPropagation();
var action = $(this).data('action');
var target = $(this).data('target');
console.log('action=' + action);
console.log('target=' + target);
$.ajax({
type: "GET",
url: "/echo/json/" //url: action
}).done(function (data) {
var $temp = $('<div/>', {
html: data
});
//var dialog_box = add_dialog(target);
var dialog_box = $('#' + target);
dialog_box.find('.text').empty();
dialog_box.find('.text').html($temp.remove('head').html());
dialog_box.dialog();
dialog_box.dialog('option', 'title', $temp.find('title').text());
dialog_box.dialog("open");
});
});