I am trying to render a modal with a simple change in my data using a vue #click on an element but I'm not able to get the modal to popup. I am hoping someone can point me in the right direction here.
I'm not using vue-bootstrap in this project just bootstrap 4 for reference here.
my click
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
my Modal
<!--MODAL SECTION-->
<div v-if="showModal" class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--MODAL SECTION-->
my data
data:{
otherData: [],
showModal: false
}
You need data-toggle and data-target on the button:
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button data-target="#myModal" data-toggle="modal" #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
See: https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes
Since the modal is controlled via some bootstrap internals, I do not think you need the v-if and #click handler.
Related
My system does not show the modal fade when I click on the button I don't know what to do anymore I'm using vuetify , vue js , and axios in the project follow the code section below
<div
ref="modal"
class="modal show"
:class="{show}"
tabindex="-1"
role="dialog"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Criação de Marca</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
#click="criarMarca"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form v-on:submit.prevent="cadastroMarca">
<div class="mb-3">
<label for="formName" class="form-label">Nome</label>
<input class="form-control" type="text" v-model="Marca" id="marca">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary pull-right">Cadastrar</button>
</div>
</form>
</div>
</div>
</div>
</div>
I already tried to reinstall the node module, I already changed it for modal-dialog, then when I change it for modal-dialog it appears more static, I would like to know if anyone has had this problem, if so, what is the way to solve it
Currently, I'm making a modal in vue3
I would like to use the modal component provided by bootstrap.
I try to make the modal window pop up when I press the delete comment button.
Therefore, when the value of delete_show becomes true, the conditions were set so that the modal would appear.
However, modals do not appear.
Modal-related codes and component-related codes are located together in one component.
What should I do to make the modal appear?
<template>
<div
class="modal"
tabindex="-1"
v-if="delete_show == true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
댓글 삭제
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>댓글을 삭제하시겠습니까?</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
취소
</button>
<button
type="button"
#click="commentDelete"
class="btn btn-primary">
삭제
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="commentListWrapper">
<ul class="commentBoxWrapper">
<li class="comments">
<div class="commentArea">
<div class="commentAreaTop">
<div class="commentUser">
{{ userComment.userId }}
</div>
<div class="commentRating">
{{ userComment.starRate }}
</div>
</div>
<div
class="commentText"
v-if="edit">
{{ userComment.comment }}
</div>
<div
v-else
class="commentFixArea">
<textarea
class="commentFixBox"
v-model="userComment.comment"></textarea>
</div>
<div
v-if=" userComment.userId === this.$store.state.loginService.UserInfoObj.id && edit"
class="commentMethods">
<div class="commentFix">
<span #click="changeEdit">수정</span>
</div>
<div class="commentDelete">
<span #click="changeModalStatus">삭제</span>
</div>
</div>
<div
class="editButton"
v-else-if="!edit">
<button
type="button"
#click="commentFix"
class="btn btn-primary btn-sm">
저장
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
I am unable to properly capture data from a modal popup as part of the Html.BeginCollectionItem for a dynamic collection. Could someone point me to a sample?
MainForm.cshtml loads a partial view for items in the model.
_Item.cshtml
Here you would see that I am trying to get the sub-items via modal popup.
#using (Html.BeginCollectionItem("Items"))
{
... details of items
// To get Sub item details via popup
<input class="btn-primary" type="button" value="Add new SubItem" />
<div class="modal fade" id="NewPage_#Model.AddPage.Id" tabindex="-1" role="dialog" aria-labelledby='Button+#Model.AddPage.Id' aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
loading ...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
}
_SubItem.cshtml
#using (Html.BeginCollectionItem("SubItems"))
{
... details of sub-items
}
Based on the live demo in the Bootstrap examples, I've made this fiddle to show a dialog.
Then this fiddle should bring up the dialog on click, but is not working:
<button type='button' data-toggle='modal' data-target='#myModal'>Click here</button>
It may be obvious, but what am I missing from the above-linked live demo?
I had some trouble getting this to work, I'm not entirely sure, but I think that the issue was mainly the 'External Resources' on JSFiddle.
I have added the jQuery CDN to the fiddle, you can find it here:
https://jsfiddle.net/7ww5ra98/1/
Here is the HTML:
<button type="button" data-toggle="modal" data-target="#myModal">Click Here</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Popup Dialog</h4>
</div>
<div class="modal-body">
<p>Wow, it works!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Reset Password</button>
</div>
</div>
</div>
</div>
Hope you found this useful.
My twitter bootstrap modal window isn't loading properly; it is faded when it loads. Here is an image demonstrating the problem.
I have tried a few things but cannot resolve the issue.
My code is:
<button type=\"button\" class=\"btn btn-danger btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" href=\"#myModal\">
<div id=\"myModal\" class=\"modal fade\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>
<h4 class=\"modal-title\">Confirmation</h4>
</div>
<div class=\"modal-body\">
<p>Do you want to save changes you made to document before closing?</p>
<p class=\"text-warning\"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>
<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
</div>
</div>
</div>
</div></div>
There's invalid syntax in your code example (HTML and Bootstrap). It seems like you're trying to load a warning button before the modal, but you're missing text for the button as well as the closing button tag. Here's a Bootstrap 3 example that should accomplish what you described:
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" href="#myModal">
Save Now!
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Edit the button text to read what you'd like. "Save Now!" is just an example for illustration purposes.