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.
Related
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
}
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.
s3 called up txt file and showed it to new window was successful.
I want to show you the contents of this txt file using a modal pop-up. I've tried it, but I don't show it 'body'.
Thanks very much for your help.
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">
<i class="fa fa-question-circle" aria-hidden="true"></i></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">Modal Header</h4>
</div>
<div class="modal-body" action="{{ url_for('information') }}" method="POST" >
{{ my_text }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#app.route('/information', methods=['POST'])
def information():
key = request.form['key']
my_bucket = get_bucket()
file_obj = my_bucket.Object('parameter.txt')
my_text = Response(file_obj.get()['Body'].read(), mimetype='text/plain',)
return render_template('html_with_modal.html', my_text=my_text)
You need to do something like this.
Firstly, save your response in a variable, like
my_text = Response(file_obj.get()['Body'].read(), mimetype='text/plain',)
then you need to render your template and pass your text in as an argument, like
return render_template('html_with_modal.html', my_text=my_text)
and then just like you wherever you want to place my_text in your template, you can put something like
<div class="modal-body" open="{{ url_for('information') }}" method="POST" >
{{my_text}}
</div>
I was experimenting with my newly acquired knowledge of Vue and Bootstrap when I ran on a behaviour that I couldn't explain.
<div class="col-sm-4" class="text-center">
<p v-html="mensagem"></p>
<button v-for="tipo in tiposJogadas" class="btn btn-primary" #click="escolhe(tipo)">{{ tipo }}</button>
<div class = "row">
<div class = "column-sm-12" class="text-center">
<button class="btn btn-danger" #click="reset()">Reiniciar</button>
</div>
</div>
</div>
Renders three buttons on glued on the other. Whileas if I replace the v-for statement for three button statements like this:
<div class="col-sm-4" class="text-center">
<p v-html="mensagem"></p>
<button class="btn btn-primary" #click="escolhe('pedra')">Pedra</button>
<button class="btn btn-primary" #click="escolhe('papel')">Papel</button>
<button class="btn btn-primary" #click="escolhe('tesoura')">Tesoura</button>
<div class = "row">
<div class = "column-sm-12" class="text-center">
<button class="btn btn-danger" #click="reset()">Reiniciar</button>
</div>
</div>
</div>
It renders everything perfectly. I don't understand why, since when I inspect the final elements in both scenarios they are the same.
I wasn't gonna ask, but I also couldn't manage to center the red reset button. Since I'm already asking a question, it'd be nice to know why what I've tried doesn't work as well.
Because the line returns in the HTML are adding whitespace between the buttons. v-for isn't. v-for is rendering the same as...
<div class="col-sm-4">
<p v-html="mensagem"></p>
<button class="btn btn-primary" #click="escolhe('pedra')">Pedra</button><button class="btn btn-primary" #click="escolhe('papel')">Papel</button><button class="btn btn-primary" #click="escolhe('tesoura')">Tesoura</button>
<div class="row">
<div class="column-sm-12">
<button class="btn btn-danger" #click="reset()">Reiniciar</button>
</div>
</div>
</div>
You could add a margin-right (mr-1) to each button...
<button v-for="tipo in tiposJogadas" class="btn btn-primary mr-1" #click="escolhe(tipo)">{{ tipo }}</button>
https://www.codeply.com/go/pXOPYAA8St
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.