I can load the modal using this piece of code with no issues.
<button type="button" class="btn btn-danger btn-sm" id="sweet_prompt">
Deploy Code <i class="icon-play3 position-right"></i>
</button>
However, I need it as an HTML link and not a button (don't want to mess with the themes' CSS styling). Nothing happens when I click on the link.
<a href="#" data-target="#sweet_prompt" data-toggle="modal">
<i class="icon-history position-left"></i>Deploy Code
</a>
Fixed: I modified it so that the link is constructed this way.
<a id="sweet_prompt">Deploy Code</a>
Look this example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/mmfansler/aQ3Ge/show/">
<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>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
Given that we (currently) don't know how the modal is being triggered, I'll assume the listener is attached to either button#sweet_prompt or perhaps just #sweet_prompt.
Rewrite either the HTML of your link to use the selector the listener is attached to, or rewrite the listener to attach to the <a/> element.
Related
I want to clear the values of a certain table so I want to get the table name using Bootstrap modal. I want the name of the table in url.
This is my code:
Here I'm sending the name of the table into the modal
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</ol>
I want to pass the value inside data-table into href as clear.php?clear_id="table_name"
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Are you sure you want to clear scrap for this table.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="clear.php?clear_id=">Clear</a>
</div>
</div>
</div>
</div>
Thank you in advance!
You can dynamically change the href value of the Clear button in your modal by utilising the shown.bs.modal event trigger and building the URL with the data-table attribute at your disposal provided by the relatedTarget property in the event object.
I've add a clear button click event to emphasise this visually.
$('#scrapModal').on('show.bs.modal', function (e) {
var table = $(e.relatedTarget).data('table')
var href = 'clear.php?clear_id=' + table
$('.btn-danger', this).attr('href', href)
console.log(href)
})
// Simulate "clear" button click to alert href value
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="breadcrumb text-center">
<li class="breadcrumb-item">
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product1">Insert1</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product2">Insert2</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product3">Insert3</a>
<a class="btn btn-primary" href="#scrapModal" data-toggle="modal" data-table="product4">Insert4</a>
</li>
</ol>
<div class="modal fade" id="scrapModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Confirm Clear?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to clear scrap for this table.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger" href="#">Clear</a>
</div>
</div>
</div>
</div>
Use the following lines of code inside your script tag and this should work fine.
$('#scrapModal .btn-danger').on('click', function (e) {
e.preventDefault()
alert(e.target.pathname + e.target.search)
})
You can do it by using a simple script like this:
$('#scrapModal').on('show.bs.modal', function (event) {
var table = $(event.relatedTarget).data('table');
$(this).find('.btn-danger').attr("href", "clear.php?clear_id=" + table);
)}
This will run when the modal appears. It would be better to give the confirm button an id attribute in order to look up in a more elegant way.
You can find more information about varying the modal content here: https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content
I'm new to programming, and I have this simple question but I can't figure out how to do it.
I got this working code from Boostrap 4:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" 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">
...
</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>
But instead of having a button I want to create a function to fire up the modal content:
function openModal(){
/* DESCRIPTION: Open the warning modal */
// data-toggle="modal" data-target="#exampleModal"
}
But I don't know how to the same thing as data-toggle and
data-target do in the button click.
Someone has a hint how to do that?
You have to use the Bootstrap JS api for the modal ( Link attached at the end of this answer ).
Here is the straight answer :-)
function openModal(){
/* DESCRIPTION: Open the warning modal */
$('#exampleModalLong').modal('show');
}
Here is another SO question related to this : How can I trigger a Bootstrap modal programmatically?
Here is a detailed link on Bootstrap official documentation on various javascript methods for modals.
https://getbootstrap.com/docs/4.0/components/modal/#methods
Just use this line in your function:
$('#myModal').modal('show');
Note: remember to replace your modal id with myModal.
I am trying to add modal to the HTML page, But unable to bring modal to the front, I've copied bootstrap sample code.
Also I tried to keep JSFiddle, Although it's working in JSFiddle, Not in my program.
So it's better to show the whole code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
It should work like this but, in my code this type output will be produced...
Image link
Hope for help...
It seems that the default z-index value of 1040 for '.modal-backdrop' is being overridden by your custom CSS styles. Make sure the z-index for '.modal-backdrop' is set to 1040.
I have a bootstrap modal and want to scroll down on button click:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"
data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary pull-right" data-dismiss="modal">
<i class="fa fa-times"></i><span class="hidden-xs">Close</span></button>
<button id="refresh" type="button" class="btn btn-primary pull-right">
<i class="fa fa-refresh"></i><span class="hidden-xs"> Refresh</span></button>
<h4 class="modal-title"> myTitle</h4>
</div>
<div class="modal-body">
<p id="verylongtext">Here is a very long text</p>
<p class="hidden" id="modal-bottom"></p>
</div>
</div>
</div>
JavaScript:
$('#refresh').click(function() {
$("#modal-dialog").animate({
scrollTop: $("#modal-bottom").offset().top
}, 1000);
});
This is my bootply so far. I tried several different ways but i don't get it working.
EDIT: I updated the snippet and bootply, but it still doesn't work...
So I played around with it, and you're missing stuff from the initial div for your modal header. I figured this out by copying the markup for a modal from the Bootstrap documentation and using your button to open it, which allowed the modal to scroll smoothly. I replaced the first line because I noticed items were missing, and that's the problem. The order the items is in might also be important, as I added them in various spots but still couldn't get it to work.
Make this the first line of your modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Here it is running in a Bootply.
The solution was to put an extra container element within modal-body:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary pull-right" data-dismiss="modal">
<i class="fa fa-times"></i><span class="hidden-xs"> Close</span></button>
<button type="button" class="btn btn-primary pull-right" data-bind="click: refresh">
<i class="fa fa-refresh"></i><span class="hidden-xs"> Refresh</span></button>
<h4 class="modal-title" data-bind="text: title"></h4>
</div>
<div class="modal-body">
<div id="scrollContainer">
<p id="topAnchor"></p>
<pre data-bind="text: content"></pre>
<p id="bottomAnchor"></p>
</div>
</div>
</div>
</div>
The refresh-function does this:
$("#scrollContainer").animate({ scrollTop: $("#topAnchor").offset().top}, 0);
// some other stuff here...
$("#scrollContainer").animate({ scrollTop: $("#bottomAnchor").offset().top}, 500);
The animation is always from top to down this way. If only the scrolling to #bottomAnchor was called, the animation would jump up again from the bottom.
I have a <li> which when clicking on it, I wish to open a modal before perfoming a certain action. Is this possible? As all the modal examples I found were all concerning button but I do not want to change it.
This is the code I'm using (and what I've tried so far)
Modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">
Are you sure you want to Add an Iteration?
</div>
<div class="modal-footer">
#using (Html.BeginForm("AddNewIteration", "Index"))
{
#Html.AntiForgeryToken()
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Add Iteration</button>
}
</div>
</div>
<li> in concern
<!-- Start of Add New Iteration -->
<li>
<a href="#myModal" data-toggle="#myModal">
<span class="ca-icon"><i class="fa fa-plus-square fa-3x"></i></span>
<div class="ca-content">
<h2 class="ca-main"> Add new Iteration</h2>
<h3 class="ca-sub"> Add New Iteration to the Project!</h3>
</div> <!-- End of ca-content-->
</a>
</li> <!-- Add New Iteration -->
Thanks in advance
No Matter, I found what I was doing wrong.
Was declaring the tag wrong Had to change it to:
<a href="#" data-toggle="modal" data-target="#myModal">