Bootstrap modal keep disappearing
0
I have been trying to display a modal after i click a button. The problem is the modal pops up but then it closes back automatically. I have linked only two js files which are bootstrap.js and jquery.js in the head section.
This is my head section:
<head runat="server">
<title></title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
This is the code for the button:
<asp:Button ID="btn1" runat ="server" data-toggle="modal" data-target="#PopupBookForm"/>
And this is the modal:
<div class="modal" id="PopupBookForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Event Form</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group ">
<asp:Label runat="server" Text="Meeting Title :"></asp:Label><br />
<asp:TextBox type="text" ID="meetTitle" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Date of Meeting :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDate" class="form-control" runat="server"></asp:TextBox>
<br/>
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting Start :"></asp:Label><br />
<asp:TextBox type="text" ID="meetStart" class="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting End :"></asp:Label><br />
<asp:TextBox type="text" ID="meetEnd" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<br />
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Plant :"></asp:Label>
<select ID="plantDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Plant</option>
</select>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Room :"></asp:Label>
<select id="roomDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Room</option>
</select>
</div>
</div>
<br />
<asp:Label runat="server" Text="Meeting Description :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDesc" class="form-control" runat="server" Textmode="multiline" Columns="50" Rows="5"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Employee ID :"></asp:Label><br />
<asp:TextBox type="text" ID="empID" class="form-control" runat="server"></asp:TextBox>
<br />
</div>
</div>
<div class="modal-footer">
<asp:Button ID="BtnPopupCancel" CssClass="btn" runat="server" Text="Cancel"/>
<asp:Button ID="BtnPopupSave" CssClass="btn btn-outline-success" runat="server" Text="Save" />
</div>
</div>
</div>
</div>
Much Thanks !
asp.net webforms bootstrap-4 bootstrap-modal
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
add a comment |
0
I have been trying to display a modal after i click a button. The problem is the modal pops up but then it closes back automatically. I have linked only two js files which are bootstrap.js and jquery.js in the head section.
This is my head section:
<head runat="server">
<title></title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
This is the code for the button:
<asp:Button ID="btn1" runat ="server" data-toggle="modal" data-target="#PopupBookForm"/>
And this is the modal:
<div class="modal" id="PopupBookForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Event Form</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group ">
<asp:Label runat="server" Text="Meeting Title :"></asp:Label><br />
<asp:TextBox type="text" ID="meetTitle" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Date of Meeting :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDate" class="form-control" runat="server"></asp:TextBox>
<br/>
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting Start :"></asp:Label><br />
<asp:TextBox type="text" ID="meetStart" class="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting End :"></asp:Label><br />
<asp:TextBox type="text" ID="meetEnd" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<br />
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Plant :"></asp:Label>
<select ID="plantDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Plant</option>
</select>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Room :"></asp:Label>
<select id="roomDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Room</option>
</select>
</div>
</div>
<br />
<asp:Label runat="server" Text="Meeting Description :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDesc" class="form-control" runat="server" Textmode="multiline" Columns="50" Rows="5"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Employee ID :"></asp:Label><br />
<asp:TextBox type="text" ID="empID" class="form-control" runat="server"></asp:TextBox>
<br />
</div>
</div>
<div class="modal-footer">
<asp:Button ID="BtnPopupCancel" CssClass="btn" runat="server" Text="Cancel"/>
<asp:Button ID="BtnPopupSave" CssClass="btn btn-outline-success" runat="server" Text="Save" />
</div>
</div>
</div>
</div>
Much Thanks !
asp.net webforms bootstrap-4 bootstrap-modal
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
add a comment |
0
0
0
I have been trying to display a modal after i click a button. The problem is the modal pops up but then it closes back automatically. I have linked only two js files which are bootstrap.js and jquery.js in the head section.
This is my head section:
<head runat="server">
<title></title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
This is the code for the button:
<asp:Button ID="btn1" runat ="server" data-toggle="modal" data-target="#PopupBookForm"/>
And this is the modal:
<div class="modal" id="PopupBookForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Event Form</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group ">
<asp:Label runat="server" Text="Meeting Title :"></asp:Label><br />
<asp:TextBox type="text" ID="meetTitle" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Date of Meeting :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDate" class="form-control" runat="server"></asp:TextBox>
<br/>
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting Start :"></asp:Label><br />
<asp:TextBox type="text" ID="meetStart" class="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting End :"></asp:Label><br />
<asp:TextBox type="text" ID="meetEnd" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<br />
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Plant :"></asp:Label>
<select ID="plantDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Plant</option>
</select>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Room :"></asp:Label>
<select id="roomDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Room</option>
</select>
</div>
</div>
<br />
<asp:Label runat="server" Text="Meeting Description :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDesc" class="form-control" runat="server" Textmode="multiline" Columns="50" Rows="5"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Employee ID :"></asp:Label><br />
<asp:TextBox type="text" ID="empID" class="form-control" runat="server"></asp:TextBox>
<br />
</div>
</div>
<div class="modal-footer">
<asp:Button ID="BtnPopupCancel" CssClass="btn" runat="server" Text="Cancel"/>
<asp:Button ID="BtnPopupSave" CssClass="btn btn-outline-success" runat="server" Text="Save" />
</div>
</div>
</div>
</div>
Much Thanks !
asp.net webforms bootstrap-4 bootstrap-modal
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
I have been trying to display a modal after i click a button. The problem is the modal pops up but then it closes back automatically. I have linked only two js files which are bootstrap.js and jquery.js in the head section.
This is my head section:
<head runat="server">
<title></title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
This is the code for the button:
<asp:Button ID="btn1" runat ="server" data-toggle="modal" data-target="#PopupBookForm"/>
And this is the modal:
<div class="modal" id="PopupBookForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Event Form</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group ">
<asp:Label runat="server" Text="Meeting Title :"></asp:Label><br />
<asp:TextBox type="text" ID="meetTitle" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Date of Meeting :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDate" class="form-control" runat="server"></asp:TextBox>
<br/>
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting Start :"></asp:Label><br />
<asp:TextBox type="text" ID="meetStart" class="form-control" runat="server"></asp:TextBox>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Meeting End :"></asp:Label><br />
<asp:TextBox type="text" ID="meetEnd" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<br />
<div class="form-inline">
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Plant :"></asp:Label>
<select ID="plantDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Plant</option>
</select>
</div>
<div class="form-group col-sm-6">
<asp:Label runat="server" Text="Room :"></asp:Label>
<select id="roomDropDown" class="form-control" style="width:200px">
<option value="" disabled selected hidden>Select Room</option>
</select>
</div>
</div>
<br />
<asp:Label runat="server" Text="Meeting Description :"></asp:Label><br />
<asp:TextBox type="text" ID="meetDesc" class="form-control" runat="server" Textmode="multiline" Columns="50" Rows="5"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Employee ID :"></asp:Label><br />
<asp:TextBox type="text" ID="empID" class="form-control" runat="server"></asp:TextBox>
<br />
</div>
</div>
<div class="modal-footer">
<asp:Button ID="BtnPopupCancel" CssClass="btn" runat="server" Text="Cancel"/>
<asp:Button ID="BtnPopupSave" CssClass="btn btn-outline-success" runat="server" Text="Save" />
</div>
</div>
</div>
</div>
Much Thanks !
asp.net webforms bootstrap-4 bootstrap-modal
asp.net webforms bootstrap-4 bootstrap-modal
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
asked Nov 13 '18 at 4:07
H.MustafaH.Mustafa
83
83
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
ASP.NET Webforms generates custom HTML for its controls based on the control type and might override javascript events like onclick ...
You should not use ASP controls unless you need to access them in the backend.
Try using a simple html element:
<button type="button" data-toggle="modal" data-target="#PopupBookForm">
Launch demo modal
</button>
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
Okay it worked. Thanks !
– H.Mustafa
Nov 14 '18 at 4:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273647%2fbootstrap-modal-keep-disappearing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
ASP.NET Webforms generates custom HTML for its controls based on the control type and might override javascript events like onclick ...
You should not use ASP controls unless you need to access them in the backend.
Try using a simple html element:
<button type="button" data-toggle="modal" data-target="#PopupBookForm">
Launch demo modal
</button>
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
Okay it worked. Thanks !
– H.Mustafa
Nov 14 '18 at 4:16
add a comment |
0
ASP.NET Webforms generates custom HTML for its controls based on the control type and might override javascript events like onclick ...
You should not use ASP controls unless you need to access them in the backend.
Try using a simple html element:
<button type="button" data-toggle="modal" data-target="#PopupBookForm">
Launch demo modal
</button>
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
Okay it worked. Thanks !
– H.Mustafa
Nov 14 '18 at 4:16
add a comment |
0
0
0
ASP.NET Webforms generates custom HTML for its controls based on the control type and might override javascript events like onclick ...
You should not use ASP controls unless you need to access them in the backend.
Try using a simple html element:
<button type="button" data-toggle="modal" data-target="#PopupBookForm">
Launch demo modal
</button>
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
ASP.NET Webforms generates custom HTML for its controls based on the control type and might override javascript events like onclick ...
You should not use ASP controls unless you need to access them in the backend.
Try using a simple html element:
<button type="button" data-toggle="modal" data-target="#PopupBookForm">
Launch demo modal
</button>
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
answered Nov 13 '18 at 10:47
Sergiu MuresanSergiu Muresan
3146
3146
Okay it worked. Thanks !
– H.Mustafa
Nov 14 '18 at 4:16
add a comment |
Okay it worked. Thanks !
– H.Mustafa
Nov 14 '18 at 4:16
Okay it worked. Thanks !
– H.Mustafa
Nov 14 '18 at 4:16
Okay it worked. Thanks !
– H.Mustafa
Nov 14 '18 at 4:16
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273647%2fbootstrap-modal-keep-disappearing%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
