У меня есть modal, что мне нужно всплывающее окно при загрузке страницы. Однако существующий у меня код не отображает его (кажется, ничего не происходит). Существующий код был использован для отображения из щелчка строки table. (это работало отлично.)
Затем я экспериментировал с этим новым фрагментом кода, который отображает modal при загрузке страницы, хотя отображает его неправильно.
У меня есть 3 вопроса. (Если их нужно поместить в разные записи, пожалуйста, дайте мне знать)
- в чем разница между моим
table кодом щелчка строки и новым фрагментом кода, который я пробую (НЕ часть события, а часть фактическое отображение модальной части). - Почему новый фрагмент не отображается правильно.
- лучший способ получить желаемый результат. (Отображение
modal правильно при загрузке страницы)
при щелчке строки таблицы (этот код работал правильно):
$(document).ready(function ($) {
$(".table_row_click1").click(function (e) {
$(this).attr('data-target', "#myModal");
$(this).attr('data-toggle', 'modal');
});
});
новый фрагмент, который я пробовал:
window.addEventListener('load', () => {
$('#myModal').modal('toggle');
});
modal:
<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel'
aria-hidden='true'>
<div class='modal-dialog modal-dialog-scrollable' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='exampleModalLabel'>Supplier information</h3>
<button class='close' type='button' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span></button>
</div>
<div class='modal-body'>
<div class='form-group'><label for='ids'>ID:</label><input runat="server" id="modal_id" class="form-control" required='required' type="text" placeholder="" readonly></div>
<div class='form-group'><label for='name'>Name:<span style="color:red">*</span></label><input runat="server" id="modal_name" class='form-control firstname' required='required' type='text' name='name'
placeholder='Enter first name' /></div>
<div class='form-group'><label for='country'>Country:</label><input runat="server" id="modal_country" class='form-control lastname' type='text' name='country' placeholder='Enter Country'
/></div>
<div class='form-group'><label for='state'>State:</label><input runat="server" id="modal_state" class='form-control phone' type='text' name='state' placeholder='Enter State'
/></div>
<div class='form-group'><label for='street_name'>Street Name:</label><input runat="server" id="modal_street_name" class='form-control email' type='text' name='street_name' placeholder='Enter Street Name'
/></div>
<div class='form-group'><label for='street_number'>Street #:</label><input runat="server" id="modal_street_number" class='form-control address' type='text' name='street_number' placeholder='Enter Street #'
/></div>
<div class='form-group'><label for='phone1'>Phone # 1:</label><input runat="server" id="modal_phone_number_1" class='form-control birthday' type='text' name='phone1' placeholder='Enter Phone # 1'
/></div>
<div class='form-group'><label for='phone2'>Phone # 2:</label><input runat="server" id="modal_phone_number_2" class='form-control birthday' type='text' name='phone2' placeholder='Enter Phone # 2'
/></div>
<div class='form-group'><label for='email1'>Email 1:</label><input runat="server" id="modal_email_1" class='form-control birthday' type='text' name='email1' placeholder='Enter Email 1'
/></div>
<div class='form-group'><label for='email2'>Email 2:</label><input runat="server" id="modal_email_2" class='form-control birthday' type='text' name='email2' placeholder='Enter Email 2'
/></div>
<div class='form-group'><label for='rep_first_name'>Rep First Name:</label><input runat="server" id="modal_rep_first_name" class='form-control birthday' type='text' name='rep_first_name' placeholder='Enter Rep First Name'
/></div>
<div class='form-group'><label for='rep_last_name'>Rep Last Name:</label><input runat="server" id="modal_rep_last_name" class='form-control birthday' type='text' name='rep_last_name' placeholder='Enter Rep Last Name'
/></div>
<div class='form-group'><label for='rep_phone'>Rep Phone #:</label><input runat="server" id="modal_rep_phone_number" class='form-control birthday' type='text' name='rep_phone' placeholder='Enter Rep Phone #'
/></div>
<div class='form-group'><label for='rep_email'>Rep Email:</label><input runat="server" id="modal_rep_email" class='form-control birthday' type='text' name='rep_email' placeholder='Enter Rep Email'
/></div>
<div class='form-group'><label for='website'>Website:</label><input runat="server" id="modal_website" class='form-control birthday' type='text' name='website' placeholder='Enter Website'
/></div>
<div class='form-group'><label for='gender' >Active:<span style="color:red">*</span></label>
<span style="color:green"><input runat="server" id="modal_active_true" required='required' type='radio' name='Active' value='True' />True</span>
<span style="color:red"><input runat="server" id="modal_active_false" required='required' type='radio' name='Active' value='False' />False</span>
</div>
<button class='btn btn-primary btn-save-change'
type='submit'>Save changes</button>
</div>
</div>
</div>
некорректное отображение с новым фрагментом загрузки страницы:
Его положение не является правильным, фон не исчезает, и когда я нажимаю на него, он исчезает. (Метод щелчка строки таблицы не имеет этих проблем, связанных с модальным)
правильное отображение с фрагментом щелчка строки таблицы: 