troubleshooting Question

Reproducing fiddler with modal

Avatar of fskilnik
fskilnikFlag for Brazil asked on
* fiddlerCSSHTMLJavaScript
2 Comments1 Solution145 ViewsLast Modified:
Hi there!

I want to reproduce EXACTLY this fiddler : 
(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:


$('#myModal').on('', function() {

$('.swal').click(function() {
      swal({title:'Test', input: 'text'});

(B) HTML file named fiddler_modal.html with exactly the following content:

<!doctype html>
<script src=""></script>
<script src="js/modal_background.js"></script>

<meta charset="utf-8">
    <!-- Stylesheets-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

<title>Untitled Document</title>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal

<button type="button" class="swal">

<!-- 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">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      <div class="modal-body">
<button type="button" class="swal">
      <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>
<!-- Java script-->
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>

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.

Michael Vasilevsky
Solutions Architect

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros