We Keep Coding

Override the width of a modal form MVC/C# - javascript

I've got a modal form that is being shared across the application, now I'd like to reuse the same definition for this particular modal but just to override the width. Is there any way of doing this?
<div id="modal-container" class="modal fade">
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body partialContainer" style="max-height: 600px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-submit">Save</button>
</div>
</div>
</div>

Place your model definition in a partial view (_MyModel.cshtml) and replace the width from the dynamic ViewDate and call the partial view by passing the width.
Partial View Code:
<div id="modal-container" class="modal fade">
<div class="modal-dialog" style='#ViewData["width"].ToString()'> -- this style attribute should change whenever gets called on a specific view
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body partialContainer" style="max-height: 600px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-submit">Save</button>
</div>
</div>
Call the above partial view from any view or partial view by passing the width as following
#Html.Partial("_MyModel", new ViewDataDictionary { { "width", "500px" } })
We can also user Model or viewBag to pass data.

Add you own class in you model for which you want to change width
<div id="modal-container" class="modal fade customClass"> // added custom class
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body partialContainer" style="max-height: 600px;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-submit">Save</button>
</div>
</div>
</div>
Then add css for that class only
.customClass{
width:400px; // custom width
}

Related

I have a basic Bootstrap Modal on my page with a text input field, which I will want to trigger upon clicking the "Report A Bug" button shown above.
<div class="btn-group" id="exampleModal" role="group">
<button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
</div>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Please Provide A Short Description Of The Issue</h5>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<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">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
However I'm not sure of the best way to trigger it in Javascript. As you can see project already has a call to a modal, but its not a modal that is created in the HTML as I have with this 'Report A Bug' one.
$("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));
EDIT
Tried the Data Target method as mentioned below due to it's simplicity, but my Modal is not hidden nor does the click of the button trigger the modal to appear, any ideas?
<div class="btn-group" role="group">
<button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
<button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
</div>
<div class="modal-report" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report A Bug</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">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You trigger the modal with: data-target="#exampleModal"
Then you also need the right modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Programmatically you have to do this
$('#exampleModalLabel').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#exampleModalLabel').modal({ show: false})
Where exampleModalLabel is the id of the modal container.

I am using this code for on load popup when popup opens the background should be not scrollable. Please help.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >Open modal /button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document" style="width:340px;float:right;margin: 48px;">
<div class="triangle"></div>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="exampleModalLabel">Select City</h2>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<div class="col-md-3"> <label for="recipient-name" class="control-label">Recipient:</label></div>
<div class="col-md-9"><input type="text" style="border:1px solid gray;"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script>
$('#exampleModal').modal({
backdrop: 'static',
keyboard: true
})
</script>

I used as provided code and saw in codepan, there is no scroll
Please could you more elaborate your problem or provide all code.
codepen.

Is it possible to have data-slide effect inside bootstrap modal without using carousel
When i click a next button within the modal it need to slide to next div,and when back button clicked it need to data-slide previous page
is that possible??
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is Content 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Move Next</button>
</div>
<div class="modal-body">
This is Content 2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" style="float:left;">Move Back</button>
<button type="button" class="btn btn-primary">Move Next</button>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Bo
Example

You don't specify why you don't want to use carrousel. What i would do is thinking modals as simple slider. I would use a modal container larger than the window and push the modals dialogs to the left.
You can watch here the live example:
https://jsfiddle.net/juanmamig/cfmepxpd/1/
$(".btn-next").click(function() {
$('#modal-container').animate({
'margin-left': '-=100%'
}, 500);
});
$(".btn-back").click(function() {
$('#modal-container').animate({
'margin-left': '+=100%'
}, 500);
});
#modal-container {
width: 200%;
/* One Modal --> 100%, Two modals --> 200%*/
overflow: hidden
}
.modal-dialog {
float: left;
width: 50%;
margin: 10px auto;
}
.modal-content {
width: 600px;
margin: 0 auto;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modal-container">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is Content 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="next" class="btn btn-primary btn-next">Move Next</button>
</div>
</div>
</div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title 2</h4>
</div>
<div class="modal-body">
This is Content 2
</div>
<div class="modal-footer">
<button type="back" class="btn btn-primary btn-back">Move Back</button>
<button type="next" class="btn btn-primary btn-next">Move Next</button>
</div>
</div>
</div>
</div>
</div>

I am trying to open a bootstrap calendar in a modal(popup) window. by default it append on body. is there is any way to append that calendar on a div.
Actually when scroll the page the calendar goes out away through to the popup window.

I hope this helps. Add content in modal-body.
<a href="#" data-toggle="modal" data-target="#createapp">
ABC</a>
<div class="modal fade" id="createapp" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body" id="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

I want to make a modal where in if I click the button the modal pops up and the content of the modal is from a different page. Please help me.
This is my code
Click to open Modal
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<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" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
I want to know what Javascript? and where exactly should I put it?
I'm using bootstrap v 3.03 by the way.

I think this is what you're looking for. You need to pay special attention to this line in particular:
<a data-toggle="modal" class="btn btn-info" href="remote.html" data-target="#myModal">Click me !</a>