asked on Reproducing fiddler with modal
Hi there!
I want to reproduce EXACTLY this fiddler : https://jsfiddle.net/0Lng89tq/5/
(Please don´t ask my reasons to do it, nor tell me that modals were not created to be used like that, etc.)
To do so (that is, to reproduce that fiddler), I have created two files:
(A) JS file named modal_background.js with exactly the following content:
--------------------------
$(document).ready(function
$('#myModal').modal();
$('#myModal').on('shown.bs
$(document).off('focusin.m
});
$('.swal').click(function(
swal({title:'Test', input: 'text'});
});
});
--------------------------
(B) HTML file named fiddler_modal.html with exactly the following content:
--------------------------
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/modal_background.j
<meta charset="utf-8">
<!-- Stylesheets-->
<link rel="stylesheet" href="css/bootstrap.min.cs
<title>Untitled Document</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" class="swal">
swal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLa
<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">×
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<button type="button" class="swal">
swal
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Java script-->
<script src="js/core.min.js"></scr
<script src="js/script.js"></scrip
</body>
</html>
--------------------------
When I put both files uploaded and the html page is load, the image attached successfully appears, but the "swal" button doesn´t work, I mean, I press it and it does nothing.
If I "close" the swal button, it closes as expected. If I press any faded part of the screen, the swal button closes, as expected.
Question: what should I do in the code shown to make it work? (I mean, what should I do so that when the swal button is clicked, it works as expected.)
If the two js files "core.min.js" and "script.js" are problem-related, please tell me what I should change/take out from them to solve the problem.
They are lengthy, hence if you need it, please ask so that I will copy-paste them for your evaluation.
Thanks,
fskilnik
03Jan18_Figure.gif
I want to reproduce EXACTLY this fiddler : https://jsfiddle.net/0Lng89tq/5/
(Please don´t ask my reasons to do it, nor tell me that modals were not created to be used like that, etc.)
To do so (that is, to reproduce that fiddler), I have created two files:
(A) JS file named modal_background.js with exactly the following content:
--------------------------
$(document).ready(function
$('#myModal').modal();
$('#myModal').on('shown.bs
$(document).off('focusin.m
});
$('.swal').click(function(
swal({title:'Test', input: 'text'});
});
});
--------------------------
(B) HTML file named fiddler_modal.html with exactly the following content:
--------------------------
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/modal_background.j
<meta charset="utf-8">
<!-- Stylesheets-->
<link rel="stylesheet" href="css/bootstrap.min.cs
<title>Untitled Document</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" class="swal">
swal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLa
<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">×
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<button type="button" class="swal">
swal
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Java script-->
<script src="js/core.min.js"></scr
<script src="js/script.js"></scrip
</body>
</html>
--------------------------
When I put both files uploaded and the html page is load, the image attached successfully appears, but the "swal" button doesn´t work, I mean, I press it and it does nothing.
If I "close" the swal button, it closes as expected. If I press any faded part of the screen, the swal button closes, as expected.
Question: what should I do in the code shown to make it work? (I mean, what should I do so that when the swal button is clicked, it works as expected.)
If the two js files "core.min.js" and "script.js" are problem-related, please tell me what I should change/take out from them to solve the problem.
They are lengthy, hence if you need it, please ask so that I will copy-paste them for your evaluation.
Thanks,
fskilnik
03Jan18_Figure.gif
* fiddlerCSSHTMLJavaScript
Last Comment
fskilnik
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Thanks for the solution (it worked!) and also for teaching me about this "fiddler detail". (I had no idea about that!)
Regards,
fskilnik.