[英]How can I hide or show a bootstrap modal in my web page?
I'm new at web programming and trying to figure out modal structure.我是 web 编程的新手,正在尝试找出模态结构。 The point is, my modal is always open even if I refresh the page.
关键是,即使我刷新页面,我的模式也总是打开的。 I want it to be activated after user clicks a submitting button.
我希望在用户单击提交按钮后激活它。
Sory for long codes but I'm using a Colorlib template to make some practice.对于长代码很抱歉,但我正在使用 Colorlib 模板进行一些练习。 I didn't design the all form page by myself.
我没有自己设计所有表单页面。 Can you examine the code and tell me what is wrong with the bootstrap model?
你能检查代码并告诉我引导程序 model 有什么问题吗? Why it is shown in the beginning, at the top of the page?
为什么它显示在页面顶部的开头? I tried with different pages and it was working well.
我尝试了不同的页面,效果很好。
HTML Code: HTML 代码:
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="page-wrapper bg-gra-03 p-t-45 p-b-50">
<div class="wrapper wrapper--w790">
<div class="card card-5">
<div class="card-heading">
<h2 class="title">PROJENİZ VE KENDİNİZ HAKKINDA BİLGİ VERİNİZ</h2>
</div>
<div class="card-body">
<form method="post" action="/proje_ekle">
<div class="form-row m-b-55">
<div class="name">İsminiz ve<br>Soy İsminiz</div>
<div class="value">
<div class="row row-space">
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="first_name">
<span class="asterisk_input"> </span>
<label class="label--desc">isim</label>
</div>
</div>
<div class="col-2">
<div class="input-group-desc">
<input class="input--style-5" type="text" name="last_name">
<span class="asterisk_input"> </span>
<label class="label--desc">soy isim</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Şirketiniz</div>
<div class="value">
<div class="input-group">
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="company_name">
<option disabled="disabled" selected="selected">Şirketinizi Seçiniz
</option>
<option>Maxion</option>
<option>IGYA</option>
<option>İnci Holding</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Departmanınız</div>
<div class="value">
<div class="input-group">
<!-- <input class="input--style-5" type="text" name="department_name"> -->
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="department_name">
<option disabled="disabled" selected="selected">Departmanınızı seçiniz
</option>
<option>Bilgi Teknolojileri</option>
<option>İnsan Kaynakları</option>
<option>Mali İşler</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin İsmi</div>
<div class="value">
<div class="input-group">
<input class="input--style-5" type="text" name="project_name">
<span class="asterisk_input"> </span>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin Kategorisi</div>
<div class="value">
<div class="input-group">
<div class="input-group">
<div class="rs-select2 js-select-simple select--no-search">
<select name="project_category">
<option disabled="disabled" selected="selected">Projenizin Kategorisini
Seçiniz
</option>
<option>ARGE</option>
<option>Mühendislik</option>
<option>İmalat</option>
</select>
<span class="asterisk_input"> </span>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="name">Projenizin Açıklaması</div>
<div class="value">
<div class="input-group">
<textarea cols="40" rows="3" class="input--style-5" type="text"
name="project_explanation"></textarea>
<span class="asterisk_input"> </span>
</div>
</div>
</div>
<div class="form-row p-t-20">
<div class="input-group custom-file-button">
<label class="input-group-text" for="inputGroupFile">Proje Dosyaları Ekle</label>
<input type="file" class="form-control" id="inputGroupFile" multiple>
</div>
</div>
<div>
<button class="btn btn--radius-2 btn--red" type="submit">Projemi Kütüphaneye Kaydet</button>
</div>
</form>
</div>
</div>
</div>
</div>
CSS Codes: CSS 代码:
/* ==========================================================================
#FONT
========================================================================== */
.font-robo {
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
}
.font-poppins {
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
.font-opensans {
font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif;
}
/* ==========================================================================
#GRID
========================================================================== */
.row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row .col-2:last-child .input-group-desc {
margin-bottom: 0;
}
.row-space {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.row-refine {
margin: 0 -15px;
}
.row-refine .col-3 .input-group-desc,
.row-refine .col-9 .input-group-desc {
margin-bottom: 0;
}
.col-2 {
width: -webkit-calc((100% - 30px) / 2);
width: -moz-calc((100% - 30px) / 2);
width: calc((100% - 30px) / 2);
}
@media (max-width: 767px) {
.col-2 {
width: 100%;
}
}
.form-row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 40px;
}
.form-row .name {
width: 125px;
color: #555;
font-size: 15px;
font-weight: 700;
}
.form-row .value {
width: -webkit-calc(100% - 125px);
width: -moz-calc(100% - 125px);
width: calc(100% - 125px);
}
@media (max-width: 767px) {
.form-row {
display: block;
}
.form-row .name,
.form-row .value {
display: block;
width: 100%;
}
.form-row .name {
margin-bottom: 7px;
}
}
.col-3,
.col-9 {
padding: 0 15px;
position: relative;
width: 100%;
min-height: 1px;
}
.col-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-moz-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
@media (max-width: 767px) {
.col-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 35%;
-moz-box-flex: 0;
-ms-flex: 0 0 35%;
flex: 0 0 35%;
max-width: 35%;
}
}
.col-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-moz-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
@media (max-width: 767px) {
.col-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 65%;
-moz-box-flex: 0;
-ms-flex: 0 0 65%;
flex: 0 0 65%;
max-width: 65%;
}
}
/* ==========================================================================
#BOX-SIZING
========================================================================== */
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* ==========================================================================
#RESET
========================================================================== */
/**
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
margin: 0;
padding: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > ol,
li > ul {
margin-bottom: 0;
}
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
* on fieldsets.
*/
fieldset {
min-width: 0;
/* [1] */
border: 0;
}
button {
outline: none;
background: none;
border: none;
}
/* ==========================================================================
#PAGE WRAPPER
========================================================================== */
.page-wrapper {
min-height: 100vh;
}
body {
font-family: "Open Sans", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
/* ==========================================================================
#BACKGROUND
========================================================================== */
.bg-blue {
background: #2c6ed5;
}
.bg-red {
background: #fa4251;
}
.bg-gra-01 {
background: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a18cd1));
background: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: -moz-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: -o-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%);
background: linear-gradient(to top, #fbc2eb 0%, #a18cd1 100%);
}
.bg-gra-02 {
background: -webkit-gradient(linear, left bottom, right top, from(#fc2c77), to(#6c4079));
background: -webkit-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: -moz-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: -o-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%);
background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%);
}
.bg-gra-03 {
/* background: -webkit-gradient(linear, left bottom, right top, from(#08aeea), to(#b721ff));
background: -webkit-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: -moz-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: -o-linear-gradient(bottom left, #08aeea 0%, #b721ff 100%);
background: linear-gradient(to top right, #08aeea 0%, #b721ff 100%); */
background-image: url(/images/form_images/form_resim.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* ==========================================================================
#SPACING
========================================================================== */
.p-t-100 {
padding-top: 100px;
}
.p-t-130 {
padding-top: 130px;
}
.p-t-180 {
padding-top: 180px;
}
.p-t-45 {
padding-top: 45px;
}
.p-t-20 {
padding-top: 20px;
}
.p-t-15 {
padding-top: 15px;
}
.p-t-10 {
padding-top: 10px;
}
.p-t-30 {
padding-top: 30px;
}
.p-b-100 {
padding-bottom: 100px;
}
.p-b-50 {
padding-bottom: 50px;
}
.m-r-45 {
margin-right: 45px;
}
.m-r-55 {
margin-right: 55px;
}
.m-b-55 {
margin-bottom: 55px;
}
/* ==========================================================================
#WRAPPER
========================================================================== */
.wrapper {
margin: 0 auto;
}
.wrapper--w960 {
max-width: 960px;
}
.wrapper--w790 {
max-width: 790px;
}
.wrapper--w780 {
max-width: 780px;
}
.wrapper--w680 {
max-width: 680px;
}
/* ==========================================================================
#BUTTON
========================================================================== */
.btn {
display: inline-block;
line-height: 50px;
padding: 0 50px;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
font-weight: 700;
color: #fff;
font-family: inherit;
}
.btn--radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.btn--radius-2 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn--pill {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.btn--green {
background: #57b846;
}
.btn--green:hover {
background: #4dae3c;
}
.btn--blue {
background: #4272d7;
}
.btn--blue:hover {
background: #3868cd;
}
.btn--red {
background: #1a1a1a;
}
.btn--red:hover {
background: #b31515;
}
/* ==========================================================================
#DATE PICKER
========================================================================== */
td.active {
background-color: #2c6ed5;
}
input[type="date" i] {
padding: 14px;
}
.table-condensed td, .table-condensed th {
font-size: 14px;
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
}
.daterangepicker td {
width: 40px;
height: 30px;
}
.daterangepicker {
border: none;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
display: none;
border: 1px solid #e0e0e0;
margin-top: 5px;
}
.daterangepicker::after, .daterangepicker::before {
display: none;
}
.daterangepicker thead tr th {
padding: 10px 0;
}
.daterangepicker .table-condensed th select {
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
padding: 5px;
outline: none;
}
/* ==========================================================================
#FORM
========================================================================== */
input {
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
}
.radio-container {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
font-size: 16px;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-container input:checked ~ .checkmark {
background-color: #e5e5e5;
}
.radio-container input:checked ~ .checkmark:after {
display: block;
}
.radio-container .checkmark:after {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #57b846;
}
.checkmark {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
height: 20px;
width: 20px;
background-color: #e5e5e5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* input[required]{
background-image: radial-gradient(#F00 30%, transparent 30%), radial-gradient(#F00 15%, transparent 16%);
background-size: 1em 1em;
background-position: right top;
background-repeat: no-repeat;
} */
.asterisk_input::after {
content:" *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -15px;
font-size: large;
padding: 0 5px 0 0; }
.input--style-5 {
background: #e5e5e5;
line-height: 50px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.input-group-desc {
position: relative;
}
@media (max-width: 767px) {
.input-group-desc {
margin-bottom: 40px;
}
}
.input-group {
position: relative;
margin: 0;
}
.label {
color: #555;
font-size: 15px;
font-weight: 700;
}
.label--block {
width: 100%;
}
.label--desc {
position: absolute;
text-transform: capitalize;
display: block;
color: #999;
font-size: 14px;
margin: 0;
margin-top: 7px;
left: 0;
}
#inputGroupFile{
position:relative;
top:1.2em;
font-size: 0.8em ;
color: #b31515;
}
JavaScript Codes: JavaScript 代码:
(function ($) {
'use strict';
/*==================================================================
[ Daterangepicker ]*/
try {
$('.js-datepicker').daterangepicker({
"singleDatePicker": true,
"showDropdowns": true,
"autoUpdateInput": false,
locale: {
format: 'DD/MM/YYYY'
},
});
var myCalendar = $('.js-datepicker');
var isClick = 0;
$(window).on('click',function(){
isClick = 0;
});
$(myCalendar).on('apply.daterangepicker',function(ev, picker){
isClick = 0;
$(this).val(picker.startDate.format('DD/MM/YYYY'));
});
$('.js-btn-calendar').on('click',function(e){
e.stopPropagation();
if(isClick === 1) isClick = 0;
else if(isClick === 0) isClick = 1;
if (isClick === 1) {
myCalendar.focus();
}
});
$(myCalendar).on('click',function(e){
e.stopPropagation();
isClick = 1;
});
$('.daterangepicker').on('click',function(e){
e.stopPropagation();
});
} catch(er) {console.log(er);}
/*[ Select 2 Config ]
===========================================================*/
try {
var selectSimple = $('.js-select-simple');
selectSimple.each(function () {
var that = $(this);
var selectBox = that.find('select');
var selectDropdown = that.find('.select-dropdown');
selectBox.select2({
dropdownParent: selectDropdown
});
});
} catch (err) {
console.log(err);
}
})(jQuery);
if ( window.history.replaceState ) {
window.history.replaceState(null, null, window.location.href);
}
It doesn't look like any CSS or JS is hiding the modal.它看起来不像任何 CSS 或 JS 正在隐藏模态。 Why would it be hidden?
为什么会被隐藏?
There should be some CSS like:应该有一些 CSS 像:
.modal {
display: none;
}
.modal.active {
display: block; // or flex, grid, whatever you need
}
Then the triggering button needs an event listener, listening for a 'click'
event, which will add the class active
to the modal.然后触发按钮需要一个事件侦听器,侦听
'click'
事件,这会将 class active
添加到模态。 To "close" the modal you need to remove the class "active" in another event listener.要“关闭”模式,您需要在另一个事件侦听器中删除 class“活动”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.