I have a dialog box which should appear whenever I click on a checkbox. But it should not disappear when clicking outside or pressing escape. so I used backdrop='static' , keyboard='false' in my jquery.
but then this dialog box is appearing whenever I load or refresh the page.
$('#storeStatusDialog').modal({
backdrop: 'static',
keyboard: false
})
<div class="container">
<div class="modal fade" id="storeStatusDialog" role="dialog" >
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span></button>
</div>
</div>
</div>
</div>
</div>
Please tell me a way to prevent dialog box appearing when page gets loaded.
thank you so much.
HTML:
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#storeStatusDialog">
Launch
</button>
<div class="modal fade" id="storeStatusDialog" role="dialog">
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span>
</button>
</div>
</div>
</div>
</div>
</div>
Js:
$('#storeStatusDialog').modal({
show: false,
backdrop: 'static',
keyboard: false
})
Snippet:
http://codepen.io/anon/pen/dpEjxK
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 would like my modal's submit button to bring my users to my contact form outside of the modal and to close the modal in the process.
I've tried several ideas but so far, I am scrolling to the element wanted but when the modal closes it scrolls back to the element where my modal is initially located.
Modal :
<div class="modal fade" id="Modal-<?= $formation['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
<?= $formation['descriptionLongue'] ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary devis">Demander un devis</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<!-- FORMATION -->
Contact Form
<div class="container col-4" id="contact">
<!-- form contact -->
<form class="text-center border border-light p-5" action="<?=buildUrl('/contact');?>" method="POST">
etc...
Javacript
const target = document.getElementById('contact'),
buttons = document.querySelectorAll('.devis');
for (const button of buttons) {
button.addEventListener('click', function(){
$(this).parents('.modal').modal('hide');
target.scrollIntoView({
block: 'start',
behavior: 'smooth',
inline: 'nearest'
});
});
}
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.
I have this view with a modal window. When I click to open the modal window, I'd like to pass the parameter item.InstrumentId into the modal window so that I can click on a link that redirects me to the page from that specific instrument that belongs to the InstrumentId. What I'm doing below successfully passes the InstrumentId into the window, but the problem is I don't know how to pass that value into the Html.ActionLink. Any hints as to how I can proceed?
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id="#item.InstrumentId">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
var modalId = $(this).data('id');
$(".modal-dialog #myModal").val(modalId);
})
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModal"></h4>
</div>
<div class="modal-body">
#item.Message
<br/> <br/> <br/>
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: #Html.ActionLink(item.InstrumentId, "Instrument", new {instrumentid = item.InstrumentId})
</div>
<div class="col-md-4">
Checked: #item.Checked
</div>
</div>
</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>
</div>
</li>
}
UPDATE
<div>
<ul class="list-group">
#foreach (var item in Model)
{
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<h4>
Instrument: #item.InstrumentId
</h4>
</div>
<div class="col-md-4">
#item.Type
</div>
<div class="col-md-4">
<!-- Button trigger modal -->
<button type="button" class="open-dialog btn btn-primary btn-sm" data-url="#Url.Action("Instrument", new {instrumentid = #item.InstrumentId})">
View details
</button>
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
});
</script>
</div>
</div>
</li>
}
</ul>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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>
</div>
<div class="modal-body">
#*#item.Message*#
<br /> <br /> <br />
<div class="row">
<div class="col-md-4">
Slide: 1234500323
</div>
<div class="col-md-4">
Instrument: <a id="details" href="#">Details</a>
</div>
<div class="col-md-4">
Checked: #*#item.Checked*#
</div>
</div>
</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>
You currently generating a modal for each item in your collection but giving it an id="myModal" which is invalid html and means data-target="#myModal" will only ever open the first one. Move the modal outside the loop so your create only one (and also remove the <h4 class="modal-title" id="myModal"></h4> element which also has the same id attribute)
Then change the button html to
<button type="button" class=".." .. data-url="#Url.Action("Instrument", new { instrumentid = item.InstrumentId })">
and change the html in the modal to
Instrument: <a id="details" href="#">Details</a>
Then change the script to
$(document).on("click", ".open-dialog", function() {
$('#details').attr('href', $(this).data('url')); // update the links url
})
Side note: You will probably want to do something similar with Checked: #item.Checked in the modal
1.Use ID for Anchor Link.
2.Notice this line <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a> in code. It has Anchor Link Value=. When you open modal you can see Anchor Link Value=10320320 and you can inspect href too.
$('#myModal1').on('show.bs.modal', function(e) {
var modalId = $(e.relatedTarget).data('id');
$('#InstrumentIDLink').attr('href', 'url+'+ modalId)
$('#InstrumentIDLink').text('Anchor Link Value='+ modalId);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div> <a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320320'>Launch Modal (10320320)</a><br/>
<a href="#myModal1" class='open-dialog' role="button"
class="btn" data-toggle="modal" data-id='10320321'>Launch Modal (10320321)</a>
</div>
<!-- Modal -->
<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>
</div>
<div class="modal-body"> <a href='#' id='InstrumentIDLink'>Anchor Link Value=</a>
</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>
From bootstrap 3+ you can use e.relatedTarget to get element that triggered the modal
Instrument:
#Html.ActionLink("Link_Text", "Action_Name", "Controller_Name", new { id=item.InstrumentId})
Now in your COntroller you can access this value like
public ActionResult Action_Name(int id)
{
//Do something
return view();
}
I am using bootstreap3 popup(model) to select image from computer.
I want when user select one or more image then popup should be closed and image uploading preview should be display in main page (below the <i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>).
My code is
<div class="form-group">
<div class="controls form-inline">
<i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>
<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>Upload Images</h4>
</div>
<div class="modal-body">
<div class="modal-title">
</div>
<div id='content' class="tab-content">
<div class="tab-pane active" id="uplod">
<h1>Drag and Drop files using Dropzone.js</h1>
<form action="upload.php"
class="dropzone"
id="my-awesome-dropzone"></form>
</div>
</div>
</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>
</div>
My code is here .
How to do this
document.getElementById("imageid").src="../template/save.png";