Demon
Advanced Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
Цитата: значит что то не так у вас срабатывает.
ссылку бы. |
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://sa.ultratel.pro/dataTables.js" ></script>
<style>
.demoModal {
padding: 20px;
width: 320px;
background-color: #393939;
box-shadow: 0 0 10px 0 #fff;
border-radius: 10px;
z-index: 1000;
text-align: center;
}
.demoModal h2 {
color: #00c1c5;
font-size: 1.3em;
}
.demoModal label {
color: #fff;
font-size: 0.9em;
margin-bottom: 0.1em!important;
}
.demoModal__info {
margin-top: 0.7em;
color: #fff;
}
.demoModal input[type='email'] {
width: 100%;
font-size: 1.2em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-top: 0.6em;
}
.demoModal__actions {
margin-top: 0.8em;
}
.demoModal__button {
padding: 5px 10px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
margin: 10px;
transition: all .3s;
}
.demoModal__button.active {
background-color: #00c1c5;
}
.demoModal__button.active:hover {
color: #00c1c5;
background-color: #fff;
}
.demoModal__button.close {
color: #393939;
background-color: #ccc;
}
.demoModal__button.close:hover {
background-color: #a9a9a9;
}
/* Shadow */
.demoModalShadow {
position: fixed;
top: 0;
left: 0;
width: 100%!important;
/*max-width: 100%!important;*/
height: 100%!important;
/*max-height: 100%!important;*/
justify-content: center;
align-items: center;
background: rgba(204, 204, 204, 0.4);
z-index: 99999;
display: none;
}
</style>
</head>
<body>
<div id="demoModalShadow" class="demoModalShadow">
<form id="demoModal" class="demoModal">
<div id="demoModalInfo" class="demoModal__info">
<label for="email">email:</label>
<input type="email" name="email" id="email" placeholder="your@email.com">
</div>
<div class="demoModal__actions">
<input type="submit" id="demoModalSubscribe" class="demoModal__button active" value="1111">
<input type="button" id="demoModalClose" class="demoModal__button close" value="2222">
</div>
</form>
</div>
<button id='demoModalStart' class='demoModalStart'>Test1</button>
<script>
document.querySelector('#demoModalStart').addEventListener('click', function () {
document.querySelector('#demoModalShadow').style.display = 'flex';
});
</script>
<table id="equipment" class="display" style="width:100%">
<thead>
<tr>
<th>N</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>N</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready( function () {
function sleep(millis) {
var t = (new Date()).getTime();
var i = 0;
while (((new Date()).getTime() - t) < millis) {
i++;
}
}
function progress() {
document.querySelector('#demoModalShadow').style.display = 'flex';
console.log('progress');
}
var table_e = new DataTable("#equipment", {
searching: false,
paging: false,
"info": false,
"processing": true,
"columns": [
{data: 'id'},
],
"columnDefs": [{
targets: [0], className: "dt-head-center dt-body-center",
"searchable": false,
"orderable": false,
"width": 100,
},
],
layout: {
topStart: {
buttons: [
{
enabled: true,
text: "Test2",
action: function (e, dt, node, config)
{
progress();
console.log('111');
sleep(5000);
/* $.ajax({
url: 'bild_terminal.php',
method: 'post',
dataType: 'html',
async : false,
data: {ip: '172.31.0.3'},
async : false,
success: function(data){
alert(data);
}
});*/
console.log('222');
}
},
]
}
}
});
}
);
</script>
</body>
</html>
Убрал все, что только возможно. Вопрос, почему модальное окно при нажатии на кнопку Test2 появляется после паузы, а не перед и как это исправить?
|
.