I have a problem and can not solve. I have a button that when you click on it displays a message to the user confirmation, it happens that before opening this modal I would like to validate that all fields are filled.
For validation I am using the lib Parsley
If I only use simple button as below the validation is successful.
<button class="btn btn-primary" type="submit">Submit</button>
But if you use the button that calls the modal can not use the validator before.
<button data-toggle="modal" data-target="#md-default" type="button" id="postar" class="btn btn-info btn-lg"><i class="fa fa-check"></i> <b>Enviar</b></button>
<!-- Modal -->
<div class="modal fade" id="md-default" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<div class="i-circle primary"><i class="fa fa-check"></i></div>
<div class="confirmacao" id="confirmacao">
<h4>Confirma o envio do Push?</h4>
</div>
<div class="resp"></div>
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal" id="cancelButton" >Cancelar</button>
<button type="submit" class="btn btn-primary btn-flat enviar" id="submitButton" >Sim</button>
<button type="button" style="display: none" class="btn btn-default btn-flat" data-dismiss="modal" id = "closeButton">Fechar</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
You can open modal manually like below:
.on('form:submit', function() {
$('#md-default').modal('show');
return false;
});
Codepen link
Related
I made four buttons with single bootstrap modal & a button in bootstrap modal to open pic according to click on four buttons.
Now single bootstrap modal is open on each button click & one button inside modal ("Open Document") I want to work on that like...
If anyone open modal through Open Modal2 then on click "open document" should be open pic as per modal 2
I'm unable to do this anyone can do it?
.buttons{ margin:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="buttons">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda2</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda3</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda4</button>
</div>
<!-- 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">
<button class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
enter image description here
Here is your Solution mate :
$(".modelButton").click(function(){
$(".modelDocButton").attr("href",$(this).data("href"));
});
.buttons{ margin:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="buttons">
<button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.stack.imgur.com/SdR1m.jpg">Open Modal</button>
<button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.imgur.com/3TWgv.jpg">Open Moda2</button>
</div>
<!-- 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 1</h4>
</div>
<div class="modal-body">
<a class="btn btn-success modelDocButton" href="#">Open Document</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal2" 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 2</h4>
</div>
<div class="modal-body">
<button class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end snippet -->
I have the standard bootstrap modal from http://getbootstrap.com/javascript/
HTML code :
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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="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>
Now the above modal works, as it pops up once the button is clicked.
But I have two radio boxes and I only want to open the modal once a user checked accept radio option and hits a button.
<form>
<div class="radio">
<label><input type="radio" name="xx" checked>Accept</label>
</div>
<div class="radio">
<label><input type="radio" name="xx">Reject</label>
</div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
</form>
the problem with the above code is the modal will popup even if user has checked reject choice. I don't want that to happen.
You may want to drop back to procedurally triggering the modal to add conditions to the display of the modal.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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="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>
<form>
<div class="radio">
<label>
<input type="radio" name="xx" value=true checked>Accept</label>
</div>
<div class="radio">
<label>
<input type="radio" name="xx" value=false>Reject</label>
</div>
<!-- Drop the attributes that trigger the modal display -->
<button type="button" class="btn btn-primary btn-lg conditional-launch">Conditional Modal</button>
</form>
<script>
// Add this in to target the button and bind to the click event
$(".conditional-launch").click(
function(event) {
// Then get the currently selected radio button's value
var value = $("input[name=xx]:checked").val();
// Check the value to make sure you want to show the modal
if (value === 'true') {
$("#myModal").modal('show');
}
}
);
</script>
Here is a jsfiddle to check it out working: https://jsfiddle.net/z7b5krse/. The code here can be copy/pasted as long as you have jQuery and Bootstrap being loaded prior to the script block.
I have two tabs in a page, both tabs contain a modal class. Modal in the first tab works fine, i.e. it fades-in and loads the content.However, when I switch to the next tab it only fades-in and doesn't show the content when I used chrome debugger I found in the first tab is comming while in second tab is comming
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
{{category.name}}{{$parent.$parent.$index}}{{$index}}
<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
{{$parent.$parent.$index}} -- {{$index}}
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content" >{{category.name}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<p>
<input type="text" class="form-control"
name="uri" placeholder="Add URL" ng-model="uri">
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="addCustom()"
class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
data-dismiss="modal">Add</button>
<button type="button"
class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
I'm using IE-11 and I have a modal that automatically loads inside my form. It does not respect the the onClick(). Also, the data-toggle does not work. It also loads automatically.
<form ...>
<div id="manage" class="tab-pane">
<div id="media_action_div">
<button type="button" class="btn btn-primary btn-lg media_action_buttons" id="tag_media" disabled="disabled" data-toggle="modal" data-target="#tag_media_modal">Tag</button>
<button type="button" class="btn btn-danger media_action_buttons" id="delete_media" disabled="disabled">Delete</button>
<button type="button" class="btn btn-success media_action_buttons" id="activate_media" disabled="disabled">Activate</button>
<button type="button" class="btn btn-warning media_action_buttons" id="deactivate_media" disabled="disabled">Deactivate</button>
<button type="button" class="btn btn-default media_action_buttons" id="download_media" disabled="disabled">Download</button>
</div>
</div>
</form>
Here's my modal:
<!-- Modal HTML -->
<div id="media_delete_confirmation" class="modal">
<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>What would you like to do?</p>
<p class="text-warning"><small>"Delete" will remove the media.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary media_delete_footer" data-dismiss="modal">Keep</button>
<button type="button" class="btn btn-default media_delete_footer" id="modal_delete" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
Here's my simple JS:
$("#delete_media").click(function(){
$("#media_delete_confirmation").modal('show');
});
Here's my "Tag" button:
<!-- Modal HTML -->
<div id="tag_media_modal" class="modal">
<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">Tag</h4>
</div>
<div class="modal-body">
<div class="container">
<?php
echo $PARSER->search(array(
'search' => $PARSER->student,
'actions' => '<button name="action" value="Upload" class="btn">Search</button>'
));
?>
</div>
<?php echo $PARSER->form_upload->Html(); ?>
</div>
</div>
</div>
</div>
Try this code
$(document).ready(function(){
$("#media_delete_confirmation").hide();
$("#delete_media").click(function(){
$("#media_delete_confirmation").show();
});
})
I'm trying to open a popup by using the modal Bootstrap. Here is the modal code:
<div class="modal fade" id="myModal" 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">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>
<%--<a class="btn btn-info pull-right" data-toggle="modal" data-target="#myModal">Requirements</a>--%>
<button class="btn btn-info pull-right" data-toggle="modal" data-target="#myModal">Requirements</button>
Now when I try to trigger modal by button it doesn't work but it works when i use anchor tag <a>.
How can I make it work with button?
I have created a JSFIDDLE, please refer it. Here is the sample code for opening the modal on button click:
HTML:
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
I am a link
<button data-toggle="modal" data-target="#myModal" id="my_button">I am a button</button>
</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>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</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>
JS:
$('#my_button').click(function(){
$('#myModal1').modal('show');
});