如何在另一个函数中将变量传递给此结果div

时间：2019-01-15 19:29:41

标签： javascript modal-dialog

编辑：jsfiddle更新（https://jsfiddle.net/3ow12Lk0/2/）

https://jsfiddle.net/gb8qsrzc/

我正在尝试将变量传递给pbModal.open 

buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount

（朝着JS的底部），然后运行buildOut：

function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {}

以便使用

模态显示“结果” 
// Create content area and append to modal
resultHolder = document.createElement("div");
resultHolder.className = "paybutton-content";
resultHolder.id = "result";
resultHolder.innerHTML = (buttonAmount + " " + amountType + " = " + bchAmount/100000000 + " BCH");
this.modal.appendChild(resultHolder);

是新手，我不知道该怎么称呼。

试图使任何东西正常工作，我试图将所有变量都传递到任何地方，我不确定我什至无法正确执行此操作。

我正在处理的代码在这里：https://jsfiddle.net/gb8qsrzc/

模态原始物在这里供参考https://jsfiddle.net/theranjitkumar/1yhthrv8/

我应该如何将变量从按钮传递给模式？

编辑：jsfiddle更新（https://jsfiddle.net/3ow12Lk0/2/）

1 个答案:

答案 0 :(得分：0)

我认为问题与以下事实有关：您未在模态的构造​​函数中传递参数。即：

var pbModal = new Modal({
        content: pbContent,
        buttonAmount: buttonAmount,
        amountType: amountType,
        toAddress: toAddress,
        successField: successField,
        successMsg: successMsg,
        successCallback: successCallback,
        bchAmount: bchAmount
});

pbModal.open();

您可以尝试下面的示例中所示的上面的代码。

此外，您可能还想看看速率/转换计算...对我来说，它们似乎不正确，但是我不确定应该使用哪种正确的公式，因此我没有尝试解决这个问题：） 

// Create an immediately invoked functional expression to wrap our code
(function() {
  // Define our constructor 
  this.Modal = function(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {

    // Create global element references
    this.closeButton = null;
    this.modal = null;
    this.overlay = null;

    // Determine proper prefix
    this.transitionEnd = transitionSelect();

    // Define option defaults 
    var defaults = {
      autoOpen: false,
      className: 'fade-and-drop',
      closeButton: false,
      content: "",
      maxWidth: 270,
      minWidth: 250,
      overlay: true
    }
    
    // Create options by extending defaults with the passed in arugments
    if (arguments[0] && typeof arguments[0] === "object") {
      this.options = extendDefaults(defaults, arguments[0]);
    }

    if (this.options.autoOpen === true){
      this.open();
    }
  }

  // Public Methods
  Modal.prototype.close = function() {
    var _ = this;
    this.modal.className = this.modal.className.replace(" paybutton-open", "");
    this.overlay.className = this.overlay.className.replace(" paybutton-open",
      "");
    this.modal.addEventListener(this.transitionEnd, function() {
      _.modal.parentNode.removeChild(_.modal);
    });
    this.overlay.addEventListener(this.transitionEnd, function() {
      if (_.overlay.parentNode) _.overlay.parentNode.removeChild(_.overlay);
    });
  }

  Modal.prototype.open = function() {
    buildOut.call(this);
    initializeEvents.call(this);
    window.getComputedStyle(this.modal).height;
    this.modal.className = this.modal.className +
      (this.modal.offsetHeight > window.innerHeight ?
        " paybutton-open paybutton-anchored" : " paybutton-open");
    this.overlay.className = this.overlay.className + " paybutton-open";
  }

  // Private Methods
  function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {

    var content, contentHolder, docFrag, resultHolder, buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount;

    /*
     * If content is an HTML string, append the HTML string.
     * If content is a domNode, append its content.
     */

    if (typeof this.options.content === "string") {
      content = this.options.content;
    } else {
      content = this.options.content.innerHTML;
    }

    // Create a DocumentFragment to build with
    docFrag = document.createDocumentFragment();

    // Create modal element
    this.modal = document.createElement("div");
    this.modal.className = "paybutton-modal " + this.options.className;
    this.modal.style.minWidth = this.options.minWidth + "px";
    this.modal.style.maxWidth = this.options.maxWidth + "px";

    // If closeButton option is true, add a close button
    if (this.options.closeButton === true) {
      this.closeButton = document.createElement("button");
      this.closeButton.className = "paybutton-close close-button";
      this.closeButton.innerHTML = "×";
      this.modal.appendChild(this.closeButton);
    }

    // If overlay is true, add one
    if (this.options.overlay === true) {
      this.overlay = document.createElement("div");
      this.overlay.className = "paybutton-overlay " + this.options.className;
      docFrag.appendChild(this.overlay);
    }

    // Create content area and append to modal
    contentHolder = document.createElement("div");
    contentHolder.className = "paybutton-content";
    contentHolder.innerHTML = content;
    this.modal.appendChild(contentHolder);

    // Create content area and append to modal
    resultHolder = document.createElement("div");
    resultHolder.className = "paybutton-content";
    resultHolder.id = "result";
    resultHolder.innerHTML = (this.options.buttonAmount + " " + this.options.amountType + " = " + this.options.bchAmount / 100000000 + " BCH");
    this.modal.appendChild(resultHolder);

    // Append modal to DocumentFragment
    docFrag.appendChild(this.modal);

    // Append DocumentFragment to body
    document.body.appendChild(docFrag);

  }

  function extendDefaults(source, properties) {
    var property;
    for (property in properties) {
      if (properties.hasOwnProperty(property)) {
        source[property] = properties[property];
      }
    }
    return source;
  }

  function initializeEvents() {

    if (this.closeButton) {
      this.closeButton.addEventListener('click', this.close.bind(this));
    }

    if (this.overlay) {
      this.overlay.addEventListener('click', this.close.bind(this));
    }
  }

  function transitionSelect() {
    var el = document.createElement("div");
    if (el.style.WebkitTransition) return "webkitTransitionEnd";
    if (el.style.OTransition) return "oTransitionEnd";
    return 'transitionend';
  }

  var payButton = document.getElementsByClassName("pay-button");
  for (var i = 0; i < payButton.length; i++) {
    var payButtons = payButton[i];
    // pull in attribute info from button when clicked
    payButtons.addEventListener("click", function(event) {
      var buttonAmount = this.getAttribute("amount");
      var amountType = this.getAttribute("amount-type");
      var toAddress = this.getAttribute("address");
      var successField = this.getAttribute("success-field");
      var successMsg = this.getAttribute("success-msg");
      var successCallback = this.getAttribute("data-success-callback");
      var bchAmount;
      var test = "test message";

      // check if amount type is set to bch or fiat
      if (amountType === "BCH") {
        bchAmount = 100000000 * buttonAmount;
      } else if (amountType === "Satoshi") {
        bchAmount = buttonAmount;
      }

      var qr = new QRious({
        element: document.getElementById('qr'),
        value: toAddress + "?amount=" + bchAmount,
        background: 'white', // background color
        foreground: 'black', // foreground color
        backgroundAlpha: 1,
        foregroundAlpha: 1,
        level: 'M', 
        mime: 'image/png', 
        size: 250, 
        padding: null 
      });

      var qrdecoded = qr.toDataURL();
      var pbContent =
        '<div>' + '<div>' +'<div>' +
        '<div><img src="' + qrdecoded + '"></div>' +
        '</div>' +
        '<div>' +
        '<div class="addressdiv"><span>Click QR code to Copy Address</span></div>' +
        '</div>' +
        '<div>' +
        '<div class="amountdiv"><span>Amount = ' + bchAmount + ' BCH</span></div>' +
        '</div>' +
        '<div>' +
        '<div><a href="' + toAddress + '?amount=' + buttonAmount + '"><button class="pbmodal-button"><span>Open in BitcoinCash Wallet</span></button></a>' +
        '</div>' +
        '<div>' +
        '<div><button class="pbmodal-button"><span>Send BCH with Badger Wallet</span></button></div>' +
        '</div>' +
        '<div>' +
        '<div><button class="pbmodal-button"><span>Send BCH with Telecope Wallet</span></button></div>' +
        '</div>' +
        '<div>' +
        '<div id = "result"></div>' +
        '</div>' +
        '</div>' +
        '</div>';

      var pbModal = new Modal({
        content: pbContent,
        buttonAmount: buttonAmount,
        amountType: amountType,
        toAddress: toAddress,
        successField: successField,
        successMsg: successMsg,
        successCallback: successCallback,
        bchAmount: bchAmount
      });

      pbModal.open();
    });
  }
}());
body {
  font-family: Helvetica, Arial, san-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.pay-button {
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid orangeRed;
  background: transparent;
  position: relative;
  padding: 0px;
  min-width: 150px;
  margin: 5px;
  color: #fff;
  /*For IE*/
}

.pay-button>span {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pay-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
  z-index: -1;
}

.pay-button>span,
.pay-button:after {
  background-size: 300%;
  background-position: 100%;
  transition: .6s, font-size 0.2s;
}

.pay-button:hover>span,
.pay-button:hover:after {
  background-position: 0;
  font-size: 1.1em;
  color: orangeRed;
  /*For IE*/
}

.pbmodal-button {
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid orangeRed;
  background: transparent;
  position: relative;
  padding: 0px;
  width: 240px;
  margin: 0px 0px 10px 0px;
  color: #fff;
  /*For IE*/
}

.pbmodal-button>span {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pbmodal-button:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
  z-index: -1;
}
.pbmodal-button>span,
.pbmodal-button:after {
  background-size: 300%;
  background-position: 100%;
  transition: .6s, font-size .2s;
}
.pbmodal-button:hover>span,
.pbmodal-button:hover:after {
  background-position: 0;
  font-size: 1.08em;
  color: orangeRed;
  /*For IE*/
}

/* Modal Base CSS */
.paybutton-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  background: rgba(0, 0, 0, .6);
}

.addressdiv {
  word-wrap: break-word;
  font-size: 14px;
  margin: 0px 0px 10px 0px;
}

.amountdiv {
  word-wrap: break-word;
  font-size: 16px;
  margin: 0px 0px 10px 0px;
}

.paybutton-modal {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  text-align: center;
  opacity: 0;
  overflow: auto;
  width: 100%;
  padding: 10px 10px 15px 10px;
  /*padding: 24px 20px;*/
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
}

.paybutton-modal.paybutton-open.paybutton-anchored {
  top: 20px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.paybutton-modal.paybutton-open {
  opacity: 1;
}

.paybutton-overlay.paybutton-open {
  opacity: 1;
}

/* Default Animation */
.paybutton-overlay.fade-and-drop {
  display: block;
  opacity: 0;
}
.paybutton-modal.fade-and-drop {
  top: -300%;
  opacity: 1;
  display: block;
}
.paybutton-modal.fade-and-drop.paybutton-open {
  top: 50%;
  -webkit-transition: 300ms top 300ms ease;
  -moz-transition: 300ms top 300ms ease;
  -ms-transition: 300ms top 300ms ease;
  -o-transition: 300ms top 300ms ease;
  transition: 300ms top 300ms ease;
}
.paybutton-modal.fade-and-drop.paybutton-open.paybutton-anchored {
  -webkit-transition: 300ms top 300ms ease;
  -moz-transition: 300ms top 300ms ease;
  -ms-transition: 300ms top 300ms ease;
  -o-transition: 300ms top 300ms ease;
  transition: 300ms top 300ms ease;
}
.paybutton-overlay.fade-and-drop.paybutton-open {
  top: 0;
  -webkit-transition: 300ms opacity ease;
  -moz-transition: 300ms opacity ease;
  -ms-transition: 300ms opacity ease;
  -o-transition: 300ms opacity ease;
  transition: 300ms opacity ease;
  opacity: 1;
}
.paybutton-modal.fade-and-drop {
  -webkit-transition: 300ms top ease;
  -moz-transition: 300ms top ease;
  -ms-transition: 300ms top ease;
  -o-transition: 300ms top ease;
  transition: 300ms top ease;
}
.paybutton-overlay.fade-and-drop {
  -webkit-transition: 300ms opacity 300ms ease;
  -moz-transition: 300ms opacity 300ms ease;
  -ms-transition: 300ms opacity 300ms ease;
  -o-transition: 300ms opacity 300ms ease;
  transition: 300ms opacity 300ms ease;
}

/* Close Button */
   .paybutton-close {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 12px;
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 7px 7px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: #e74c3c;
}

.paybutton-close:hover {
  background: #c0392b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<button class="pay-button" amount="0.038" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.038 BCH</span>
</button>
<button class="pay-button" amount="0.1" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.1 BCH</span>
</button>
<button class="pay-button" amount="10000" amount-type="Satoshi" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>10,000 Satoshi</span>
</button>

已更新 <罢工> 我添加了第二个版本，该版本改进了每次单击按钮时都需要为模式中的所有元素（div，按钮等）生成代码的需求。

相反，我们可以有一个隐藏的div，单击按钮并添加/删除一个可根据需要隐藏/显示它的类即可更新其内容。

对于OP：，我致力于重用此div，但没有注意对现有代码的过渡效果。

对于不透明度和模态大小等仍需要进行一些细微调整，但我没有时间继续研究此部分了：）

更新2

删除了第二种方法，因为OP不会发现它有用（与我预期的要求不同）

相关问题
最新问题