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();
});
})
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 want to pass value from my main window to the popup window i am tryin to use jquery
i already using list of item to show them as a grid view i want when the user click on detail button its show to him popup window i want to pass price value to the popup window any ware in the modal body
while ( $sql=mysqli_fetch_assoc($posts)){
echo' <div class="item col-xs-6 col-lg-4">
<div class="thumbnail" >
<img class="group lis t-group-image" style="height: 221px;
width: 353px; padding: 2px;
" src="../1'.$sql['img'].'" />
<div class="caption" style="height: 105px;">
<h4 class="group inner list-group-item-heading">
'.$sql['name'].'</h4>
<p class="group inner list-group-item-text">
'.$sql['details'].' </p>
<div class="row">
<div class="col-xs-12 col-md-12">
<p id="price1" class="lead">سعر المنتج:'.$sql['price'].'</p></div>
</div>
</div>
<button id="btn1">Show Text</button>
<button data-toggle="modal" data-id="price1" id="ww" class="btn btn-primary">details </button>
<!--button data-toggle="modal" href="#shortModal" id="ww" class="btn btn-primary">مشاهدة التفاصيل</button-->
<!--button type="button" onclick="on_create_form_clicked();" class="btn btn-primary" data-toggle="modal" data-target="#product_view"><i class="fa fa-search"></i> Quick View</button -->
</div>
</div>';
}
?>
and here is the popup modal
<div id="shortModal" class="modal modal-wide 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 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
i want to pass the value to popup window to show details so any help ?
You can achieve this through using Jquery
Add Id to title of Modal or wherever you want the value to be displayed
<h4 class="modal-title" id ="ans">Modal title</h4>
Add data-id for the data to be passed to the modal
<button data-toggle="modal" data-id="yourdata" id="ww" class="btn btn-primary">details </button>
Javascript:
$("#ww").click(function () {
$('#ans').val($(this).data('id'));
$('#shortModal').modal('show');
});
You can use a click event and get the values of the price by using $("#price1").text()
$('#ww').click(function() {
$("#shortModal .modal-body").text($("#price1").text())
})
$('#ww').click(function() {
$("#shortModal .modal-body").text($("#price1").text())
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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="thumbnail">
<img class="group lis t-group-image" style="height: 221px;
width: 353px; padding: 2px;
" src="../1'.$sql['img'].'" />
<div class="caption" style="height: 105px;">
<h4 class="group inner list-group-item-heading">
'.$sql['name'].'</h4>
<p class="group inner list-group-item-text">
'.$sql['details'].' </p>
<div class="row">
<div class="col-xs-12 col-md-12">
<p id="price1" class="lead">prdoudct price : 2000</p>
</div>
</div>
</div>
<button id="btn1">Show Text</button>
<button data-toggle="modal" href="#shortModal" id="ww" class="btn btn-primary">details </button>
</div>
<div id="shortModal" class="modal modal-wide 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 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
As per my understanding you can add modal in your loop and set dynamic modal
id.
Try below code.
HTML/PHP
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<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>
<?php
$array=array();
$array[0]['name'] = 'Sony Pendrive';
$array[0]['details'] = '16 GB 2.0';
$array[0]['price'] = '120';
$array[1]['name'] = 'PNY Pendrive';
$array[1]['details'] = '32 GB 2.0';
$array[1]['price'] = '220';
foreach($array as $k=>$values){
?>
<div class="thumbnail" >
<div class="caption" style="height: 105px;">
<h4 class="group inner list-group-item-heading">
<?php echo $values['name']; ?>
</h4>
<p class="group inner list-group-item-text">
<?php echo $values['details']; ?>
</p>
<div class="row">
<div class="col-xs-12 col-md-12">
<p id="price1" class="lead">prdoudct price : <?php echo $values['price']; ?></p></div>
</div>
</div>
<button id="btn1">Show Text</button>
<button data-toggle="modal" href="#shortModal_<?php echo $k; ?>" id="ww" class="btn btn-primary">details </button>
</div>
<div id="shortModal_<?php echo $k; ?>" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>
Name : <?php echo $values['name']; ?> <br />
Details : <?php echo $values['details']; ?> <br />
Price : <?php echo $values['price']; ?> <br />
</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<?php
}
?>
In this code create Array and set dynamic model id for open specific model.
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
I wish to pass the id of a particular row into a modal
code for link
Resume
Code for modal
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="fetched-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Code for script
<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
</script>
Code for fetch.php
<?php
$editId = $_POST['rowid'];
echo $editId;
?>
I am supposed to get the id but instead i am getting undefined value in the modal, can anyone please tell why this is happening
Try this code
Resume
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<span class='ShowData'> </span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Script Code
<script>
$('.ListId').click(function()
{
var Id=$(this).attr('data-id');
$.ajax({url:"fetch.php?Id="+Id,cache:false,success:function(result)
{
$(".ShowData").html(result);
}});
});
</script>
fetch.php Code
$id=$_GET['Id'];
echo $id;
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');
});