bootstrap modal is not displaying as per my requirement - javascript

my bootstrap modal is appearing blue line at the top and bottom of the modal. I didn't know why the blue line is appearing at the top and bottom of the modal. I want to remove the blue line. I am weak in English please apologize me if I made any grammatical or spelling mistakes.
HTML CODE:
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" 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" style="text-align:center">Are you sure you want to Delete it?</h4>
</div>
<div class="modal-body">
<div class="form-group" style="text-align:center">
<h6>By clicking on Yes button your ad will be Delete.</h6>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="sayyes">Yes</button>
</div>
</div>
</div>
</div>
CSS CODE:
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
IMAGE:

Just add this style style="outline: none !important" to your main div.
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="outline: none !important">
The blue lines will be gone.

Probably you are over ridding some styles,
<div class="container">
<h3>Modal Example</h3>
<div>
Launch Modal
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
DEMO

Related

How to link JS function to a Bootstrap Text Input Modal?

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.

How to prevent background scroll when bootstrap modal is open after that it should come to normal position

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.

How to have data-slide effects inside Bootstrap modal?

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>

How do I implement navigation from one modal to another one with Bootstrap?

I have several elements on a page.
When you click one of them, a modal should appears.
I wish it could be possible to navigate from one bootstrap modal to another.
How do I implement this behavior using Bootstrap?
This will be useful for you:
HTML Code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-next">
Next
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-back">
Back
</button>
<div class="modal fade" id="modal-next" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Page1</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="next-trigger">Next</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-back" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Page2</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="back-trigger">Back</button>
</div>
</div>
</div>
</div>
JS Code
$("#next-trigger").click(function(){
$('#modal-next').modal('hide');
$('#modal-back').modal('show');
});
$("#back-trigger").click(function(){
$('#modal-back').modal('hide');
$('#modal-next').modal('show');
})
Check it out.

Image opens modal dialog bootstrap

Soooo I want to use these images I have so that when they are clicked it opens a modal dialog for a staff page on my site and I'm not sure how to do it
PS: I have seen something like this on here but its not what I wanted
<img src="https://minotar.net/helm/EpicMinerBackup">
<img src="https://minotar.net/helm/kingpooper27s">
EDIT~~~: Resolution to issue ~~~EDIT END~~
<!--####################### Start of the staff list ############################### -->
<img src="https://minotar.net/helm/EpicMinerBackup" data-toggle="modal" data-target="#Staff1" />
<div class="modal fade" id="Staff1" tabindex="-1" role="dialog" aria-labelledby="StaffModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="StaffModalLabel1">EpicMinerBackup</h4>
</div>
<div class="modal-body">
The Owner of the site and server.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--########################################################################## -->
You can use data attributes to load the modal box. img href value should match modal id value prefixed with #. In case below its #myModal. If it still doesn't work check JS errors or if the bootstrap js files are loaded.
<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here is the link for sample
http://www.bootply.com/TH49jSYRm6

Categories